diff --git a/app/src/routes/edit/elements-pane.tsx b/app/src/routes/edit/elements-pane.tsx
index 55ba09572..a63925f7d 100644
--- a/app/src/routes/edit/elements-pane.tsx
+++ b/app/src/routes/edit/elements-pane.tsx
@@ -10,11 +10,16 @@ import { ChevronDown, ChevronUp } from '@carbon/react/icons';
 import Handlebars from 'handlebars';
 import parse from 'html-react-parser';
 
-import { ElementTile, FragmentPreview, allComponents, FragmentLayoutWidget } from '@carbon-builder/sdk-react';
+import {
+	ElementTile,
+	FragmentPreview,
+	allComponents,
+	FragmentLayoutWidget,
+	accordionButtonStyle
+} from '@carbon-builder/sdk-react';
 import { leftPane, leftPaneContent, leftPaneHeader } from '.';
 import { GlobalStateContext, useFragment } from '../../context';
 import { getEditScreenParams } from '../../utils/fragment-tools';
-import { accordionButtonStyle } from './settings-context-pane';
 import { useRemoteCustomComponentsCollections } from '../../utils/misc-tools';
 
 const elementTileListStyleBase = css`
diff --git a/app/src/routes/edit/index.tsx b/app/src/routes/edit/index.tsx
index 5a652f75c..0ca0eaaf8 100644
--- a/app/src/routes/edit/index.tsx
+++ b/app/src/routes/edit/index.tsx
@@ -31,12 +31,12 @@ import { ElementsPane } from './elements-pane';
 import { StylePane } from './style-pane';
 import { CodePane } from './code-pane';
 
-import { SettingsContextPane } from './settings-context-pane';
 import { CodeContextPane } from './code-context-pane';
 import { useParams } from 'react-router-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
 import {
 	Fragment,
+	SettingsContextPane,
 	getParentComponent,
 	getSelectedComponent,
 	initializeIds,
@@ -191,7 +191,9 @@ export const Edit = () => {
 		undoAction,
 		redoAction,
 		customComponentsCollections,
-		styleClasses
+		styleClasses,
+		settings,
+		setSettings
 	} = useContext(GlobalStateContext);
 	const [remoteCustomComponentsCollections] = useRemoteCustomComponentsCollections();
 
@@ -339,7 +341,13 @@ export const Edit = () => {
 					</TabList>
 					<TabPanels>
 						<TabPanel>
-							<SettingsContextPane fragment={fragment} setFragment={updateFragment} />
+							<SettingsContextPane
+								fragment={fragment}
+								setFragment={updateFragment}
+								settings={settings}
+								setSettings={setSettings}
+								styleClasses={styleClasses}
+								customComponentsCollections={customComponentsCollections} />
 						</TabPanel>
 						<TabPanel>
 							<CodeContextPane fragment={fragment} setFragment={updateFragment} />
diff --git a/sdk/react/src/lib/components/index.ts b/sdk/react/src/lib/components/index.ts
index 493f4dfde..bc1f849d9 100644
--- a/sdk/react/src/lib/components/index.ts
+++ b/sdk/react/src/lib/components/index.ts
@@ -3,3 +3,4 @@ export * from './fragment-layout-widget';
 export * from './fragment-preview';
 export * from './custom-components-collection-editor';
 export * from './fragment';
+export * from './settings-context-pane';
diff --git a/app/src/routes/edit/selected-component-breadcrumbs.tsx b/sdk/react/src/lib/components/selected-component-breadcrumbs.tsx
similarity index 88%
rename from app/src/routes/edit/selected-component-breadcrumbs.tsx
rename to sdk/react/src/lib/components/selected-component-breadcrumbs.tsx
index c30712f83..66977dad1 100644
--- a/app/src/routes/edit/selected-component-breadcrumbs.tsx
+++ b/sdk/react/src/lib/components/selected-component-breadcrumbs.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 
 import { Breadcrumb, BreadcrumbItem } from '@carbon/react';
 
-import { useFragment } from '../../context';
 import { css } from 'emotion';
-import { getParentComponent, getSelectedComponent } from '@carbon-builder/sdk-react';
+import { getParentComponent, getSelectedComponent } from '../..';
 
 const getAncestors = (state: any, component: any) => {
 	const ancestors: any[] = [];
@@ -25,9 +24,7 @@ const getAncestors = (state: any, component: any) => {
 	return ancestors;
 };
 
-export const SelectedComponentBreadcrumbs = ({ selectedComponent }: any) => {
-	const [fragment, setFragment] = useFragment();
-
+export const SelectedComponentBreadcrumbs = ({ selectedComponent, fragment, setFragment }: any) => {
 	if (!selectedComponent) {
 		selectedComponent = getSelectedComponent(fragment);
 	}
diff --git a/app/src/routes/edit/settings-context-pane.tsx b/sdk/react/src/lib/components/settings-context-pane.tsx
similarity index 97%
rename from app/src/routes/edit/settings-context-pane.tsx
rename to sdk/react/src/lib/components/settings-context-pane.tsx
index a31176f29..b4ea115cd 100644
--- a/app/src/routes/edit/settings-context-pane.tsx
+++ b/sdk/react/src/lib/components/settings-context-pane.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import {
 	Button,
 	Checkbox,
@@ -18,9 +18,8 @@ import {
 	LayoutWidget,
 	getSelectedComponent,
 	updatedState
-} from '@carbon-builder/sdk-react';
+} from '../..';
 import { SelectedComponentBreadcrumbs } from './selected-component-breadcrumbs';
-import { GlobalStateContext } from '../../context';
 
 const styleContextPaneStyle = css`
 .cds--form-item.cds--checkbox-wrapper {
@@ -160,15 +159,15 @@ const throttledSetComponent = throttle((component: any) => setComponent(componen
 let proxySetFragment = (_fragment: any) => console.log('proxySetFragment not inizialized yet');
 const throttledSetFragment = throttle((fragment: any) => proxySetFragment(fragment), 150);
 
-export const SettingsContextPane = ({ fragment, setFragment }: any) => {
+export const SettingsContextPane = ({
+	fragment,
+	setFragment,
+	settings,
+	setSettings,
+	styleClasses,
+	customComponentsCollections
+}: any) => {
 	const selectedComponent = getSelectedComponent(fragment);
-	const {
-		settings,
-		setSettings,
-		styleClasses,
-		customComponentsCollections
-	} = useContext(GlobalStateContext);
-
 	const updateContextPaneSettings = (s: any) => {
 		setSettings({
 			...settings,