diff --git a/.bitmap b/.bitmap
index d06b8621fdfe..d7d3ee0ce2f3 100644
--- a/.bitmap
+++ b/.bitmap
@@ -1787,6 +1787,27 @@
         "mainFile": "index.ts",
         "rootDir": "scopes/preview/ui/component-preview"
     },
+    "ui/composition-compare": {
+        "name": "ui/composition-compare",
+        "scope": "teambit.compositions",
+        "version": "0.0.258",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/composition-compare"
+    },
+    "ui/composition-compare-section": {
+        "name": "ui/composition-compare-section",
+        "scope": "teambit.compositions",
+        "version": "0.0.101",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/composition-compare-section"
+    },
+    "ui/composition-live-controls": {
+        "name": "ui/composition-live-controls",
+        "scope": "teambit.compositions",
+        "version": "0.0.3",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/composition-live-controls"
+    },
     "ui/compositions-app": {
         "name": "ui/compositions-app",
         "scope": "teambit.react",
diff --git a/components/ui/composition-compare-section/composition.compare.section.ts b/components/ui/composition-compare-section/composition.compare.section.ts
new file mode 100644
index 000000000000..1e5e988885d3
--- /dev/null
+++ b/components/ui/composition-compare-section/composition.compare.section.ts
@@ -0,0 +1,22 @@
+import type { CompositionsUI } from '@teambit/compositions';
+import type { Section } from '@teambit/component';
+import type { TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';
+
+export class CompositionCompareSection implements Section, TabItem {
+  constructor(private ui: CompositionsUI) {}
+
+  navigationLink = {
+    href: 'compositions',
+    children: 'Preview',
+  };
+
+  props = this.navigationLink;
+
+  route: Section['route'] = {
+    path: 'compositions/*',
+    element: this.ui.getCompositionsCompare(),
+  };
+
+  order = 1;
+  id = 'preview';
+}
diff --git a/components/ui/composition-compare-section/index.ts b/components/ui/composition-compare-section/index.ts
new file mode 100644
index 000000000000..4941ae4caa37
--- /dev/null
+++ b/components/ui/composition-compare-section/index.ts
@@ -0,0 +1 @@
+export { CompositionCompareSection } from './composition.compare.section';
diff --git a/components/ui/composition-compare/composition-compare.context.tsx b/components/ui/composition-compare/composition-compare.context.tsx
new file mode 100644
index 000000000000..b475d7ccf83a
--- /dev/null
+++ b/components/ui/composition-compare/composition-compare.context.tsx
@@ -0,0 +1,14 @@
+import { useContext, createContext } from 'react';
+import { CompositionContentProps } from '@teambit/compositions';
+
+export type CompositionCompareContextModel = {
+  compositionProps?: CompositionContentProps;
+  isBase?: boolean;
+  isCompare?: boolean;
+};
+
+export const CompositionCompareContext: React.Context<CompositionCompareContextModel | undefined> = createContext<
+  CompositionCompareContextModel | undefined
+>(undefined);
+
+export const useCompositionCompare = () => useContext(CompositionCompareContext);
diff --git a/components/ui/composition-compare/composition-compare.module.scss b/components/ui/composition-compare/composition-compare.module.scss
new file mode 100644
index 000000000000..03fc4a17f112
--- /dev/null
+++ b/components/ui/composition-compare/composition-compare.module.scss
@@ -0,0 +1,52 @@
+.toolbar {
+  display: flex;
+  padding: 4px;
+}
+
+.left,
+.right {
+  display: flex;
+  flex: 1;
+  padding: 4px;
+  background-color: var(--background-color);
+  align-items: center;
+  justify-content: space-between;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.mainContainer {
+  display: flex;
+  height: 100%;
+  min-height: 80vh;
+}
+
+.subContainerLeft {
+  flex: 1;
+}
+
+.subContainerRight {
+  flex: 1;
+}
+
+.subView {
+  height: 100%;
+  background-color: var(--background-color);
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.widgets {
+  display: flex;
+  padding: 4px;
+}
+
+.dropdown {
+  display: flex;
+}
diff --git a/components/ui/composition-compare/composition-compare.tsx b/components/ui/composition-compare/composition-compare.tsx
new file mode 100644
index 000000000000..e370b9f9854e
--- /dev/null
+++ b/components/ui/composition-compare/composition-compare.tsx
@@ -0,0 +1,253 @@
+import React, { useMemo, useState } from 'react';
+import { useComponentCompare } from '@teambit/component.ui.component-compare.context';
+import {
+  CompositionContent,
+  LiveControlsRenderer,
+  type CompositionContentProps,
+  type EmptyStateSlot,
+} from '@teambit/compositions';
+import { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';
+import {
+  useCompareQueryParam,
+  useUpdatedUrlFromQuery,
+} from '@teambit/component.ui.component-compare.hooks.use-component-compare-url';
+import { CompareSplitLayoutPreset } from '@teambit/component.ui.component-compare.layouts.compare-split-layout-preset';
+import { RoundLoader } from '@teambit/design.ui.round-loader';
+import queryString from 'query-string';
+import { CompositionDropdown } from './composition-dropdown';
+import { CompositionCompareContext } from './composition-compare.context';
+import { uniqBy } from 'lodash';
+
+import styles from './composition-compare.module.scss';
+
+export type CompositionCompareProps = {
+  emptyState?: EmptyStateSlot;
+  Widgets?: {
+    Right?: React.ReactNode;
+    Left?: React.ReactNode;
+  };
+  previewViewProps?: CompositionContentProps;
+  PreviewView?: React.ComponentType<CompositionContentProps>;
+};
+
+export function CompositionCompare(props: CompositionCompareProps) {
+  const { emptyState, PreviewView = CompositionContent, Widgets, previewViewProps = {} } = props;
+
+  const componentCompareContext = useComponentCompare();
+
+  const { base, compare, baseContext, compareContext } = componentCompareContext || {};
+
+  const baseCompositions = base?.model.compositions;
+  const compareCompositions = compare?.model.compositions;
+
+  const selectedCompositionBaseFile = useCompareQueryParam('compositionBaseFile');
+  const selectedCompositionCompareFile = useCompareQueryParam('compositionCompareFile');
+
+  const baseState = baseContext?.state?.preview;
+  const compareState = compareContext?.state?.preview;
+  const baseHooks = baseContext?.hooks?.preview;
+  const compareHooks = compareContext?.hooks?.preview;
+  const selectedBaseFromState = baseState?.id;
+  const selectedCompareFromState = compareState?.id;
+
+  const selectedBaseCompositionId = selectedBaseFromState || selectedCompositionBaseFile;
+  const selectedCompositionCompareId = selectedCompareFromState || selectedCompositionCompareFile;
+
+  const selectedBaseComp =
+    (selectedBaseCompositionId &&
+      baseCompositions &&
+      baseCompositions.find((c) => {
+        return c.identifier === selectedBaseCompositionId;
+      })) ||
+    (baseCompositions && baseCompositions[0]);
+
+  const selectedCompareComp =
+    (selectedCompositionCompareId &&
+      compareCompositions &&
+      compareCompositions.find((c) => {
+        return c.identifier === selectedCompositionCompareId;
+      })) ||
+    (compareCompositions && compareCompositions[0]);
+
+  // const baseCompositionDropdownSource =
+  //   baseCompositions?.map((c) => {
+  //     const href = !baseState?.controlled
+  //       ? useUpdatedUrlFromQuery({
+  //         compositionBaseFile: c.identifier,
+  //         compositionCompareFile: selectedCompareComp?.identifier,
+  //       })
+  //       : useUpdatedUrlFromQuery({});
+
+  //     const onClick = baseState?.controlled ? baseHooks?.onClick : undefined;
+
+  //     return { id: c.identifier, label: c.displayName, href, onClick };
+  //   }) || [];
+
+  // const compareCompositionDropdownSource =
+  //   compareCompositions?.map((c) => {
+  //     const href = !compareState?.controlled
+  //       ? useUpdatedUrlFromQuery({
+  //         compositionBaseFile: selectedBaseComp?.identifier,
+  //         compositionCompareFile: c.identifier,
+  //       })
+  //       : useUpdatedUrlFromQuery({});
+
+  //     const onClick = compareState?.controlled ? () => compareHooks?.onClick : undefined;
+
+  //     return { id: c.identifier, label: c.displayName, href, onClick };
+  //   }) || [];
+
+  const compositionsDropdownSource = uniqBy(
+    (baseCompositions || []).concat(compareCompositions || []),
+    'identifier'
+  )?.map((c) => {
+    const href = !compareState?.controlled
+      ? useUpdatedUrlFromQuery({
+          compositionBaseFile: selectedBaseComp?.identifier,
+          compositionCompareFile: c.identifier,
+        })
+      : useUpdatedUrlFromQuery({});
+
+    const onClick = compareState?.controlled
+      ? (_, __) => {
+          compareHooks?.onClick?.(_, __);
+          baseHooks?.onClick?.(_, __);
+        }
+      : undefined;
+    return { id: c.identifier, label: c.displayName, href, onClick };
+  });
+
+  const [baseCompositionParams, setBaseCompositionParams] = useState<Record<string, any>>({
+    livecontrols: true,
+  });
+  // eslint-disable-next-line no-console
+  console.log('🚀 ~ CompositionCompare ~ baseCompositionParams:', baseCompositionParams);
+  const baseCompQueryParams = useMemo(() => queryString.stringify(baseCompositionParams), [baseCompositionParams]);
+
+  const [compareCompositionParams, setCompareCompositionParams] = useState<Record<string, any>>({
+    livecontrols: true,
+  });
+  // eslint-disable-next-line no-console
+  console.log('🚀 ~ CompositionCompare ~ compareCompositionParams:', compareCompositionParams);
+  const compareCompQueryParams = useMemo(
+    () => queryString.stringify(compareCompositionParams),
+    [compareCompositionParams]
+  );
+
+  // const selectedBaseDropdown = selectedBaseComp && {
+  //   id: selectedBaseComp.identifier,
+  //   label: selectedBaseComp.displayName,
+  // };
+
+  const selectedCompareDropdown = selectedCompareComp && {
+    id: selectedCompareComp.identifier,
+    label: selectedCompareComp.displayName,
+  };
+
+  const BaseLayout = useMemo(() => {
+    if (base === undefined) {
+      return null;
+    }
+    const baseCompModel = base.model;
+    const compositionProps = {
+      forceHeight: undefined,
+      innerBottomPadding: 50,
+      ...previewViewProps,
+      emptyState,
+      component: baseCompModel,
+      queryParams: baseCompQueryParams,
+      selected: selectedCompareComp,
+    };
+    return (
+      <div className={styles.subView}>
+        <CompositionCompareContext.Provider value={{ compositionProps, isBase: true }}>
+          <CompositionContextProvider queryParams={baseCompositionParams} setQueryParams={setBaseCompositionParams}>
+            <PreviewView
+              forceHeight={undefined}
+              innerBottomPadding={50}
+              {...previewViewProps}
+              emptyState={emptyState}
+              component={baseCompModel}
+              selected={selectedCompareComp}
+              queryParams={baseCompQueryParams}
+            />
+          </CompositionContextProvider>
+        </CompositionCompareContext.Provider>
+      </div>
+    );
+  }, [base, selectedCompareComp?.identifier]);
+
+  const CompareLayout = useMemo(() => {
+    if (compare === undefined) {
+      return null;
+    }
+    const compareCompModel = compare.model;
+    const compositionProps = {
+      forceHeight: undefined,
+      innerBottomPadding: 50,
+      ...previewViewProps,
+      emptyState,
+      component: compareCompModel,
+      // queryParams: compareCompQueryParams,
+      queryParams: 'livecontrols=true',
+      selected: selectedCompareComp,
+    };
+    return (
+      <div className={styles.subView}>
+        <CompositionCompareContext.Provider value={{ compositionProps, isCompare: true }}>
+          <CompositionContextProvider
+            queryParams={compareCompositionParams}
+            setQueryParams={setCompareCompositionParams}
+          >
+            <PreviewView
+              forceHeight={undefined}
+              innerBottomPadding={50}
+              {...previewViewProps}
+              emptyState={emptyState}
+              component={compareCompModel}
+              queryParams={compareCompQueryParams}
+              selected={selectedCompareComp}
+            />
+          </CompositionContextProvider>
+        </CompositionCompareContext.Provider>
+      </div>
+    );
+  }, [compare, selectedCompareComp?.identifier]);
+
+  const CompositionToolbar = () => {
+    if (!base && !compare) {
+      return null;
+    }
+
+    return (
+      <div className={styles.toolbar}>
+        <div className={styles.left}>
+          <div className={styles.dropdown}>
+            {compositionsDropdownSource.length > 0 && (
+              <CompositionDropdown dropdownItems={compositionsDropdownSource} selected={selectedCompareDropdown} />
+            )}
+          </div>
+          <div className={styles.widgets}>{Widgets?.Left}</div>
+        </div>
+        <div className={styles.right}>
+          <div className={styles.widgets}>{Widgets?.Right}</div>
+        </div>
+      </div>
+    );
+  };
+
+  const key = `${componentCompareContext?.base?.model.id.toString()}-${componentCompareContext?.compare?.model.id.toString()}-composition-compare`;
+
+  return (
+    <React.Fragment key={key}>
+      {componentCompareContext?.loading && (
+        <div className={styles.loader}>
+          <RoundLoader />
+        </div>
+      )}
+      <CompositionToolbar />
+      <LiveControlsRenderer />
+      <CompareSplitLayoutPreset base={BaseLayout} compare={CompareLayout} />
+    </React.Fragment>
+  );
+}
diff --git a/components/ui/composition-compare/composition-dropdown.module.scss b/components/ui/composition-compare/composition-dropdown.module.scss
new file mode 100644
index 000000000000..1392b4f06edf
--- /dev/null
+++ b/components/ui/composition-compare/composition-dropdown.module.scss
@@ -0,0 +1,26 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.placeholder {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 8px;
+  height: 30px;
+  border-radius: 6px;
+  user-select: none;
+  transition: background-color 300ms ease-in-out;
+  border: 1px solid var(--bit-border-color, #babec9);
+  background-color: var(--bit-bg-color, #ffffff);
+}
+
+.menu {
+  font-size: var(--bit-p-xs);
+  border-radius: 6px;
+  max-height: 240px;
+  overflow-y: scroll;
+  max-width: 400px;
+  width: fit-content;
+  padding: 0px;
+  z-index: $modal-z-index;
+}
diff --git a/components/ui/composition-compare/composition-dropdown.tsx b/components/ui/composition-compare/composition-dropdown.tsx
new file mode 100644
index 000000000000..c46e94c9f7f1
--- /dev/null
+++ b/components/ui/composition-compare/composition-dropdown.tsx
@@ -0,0 +1,63 @@
+import React, { useRef } from 'react';
+import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
+import { Icon } from '@teambit/design.elements.icon';
+import { Dropdown } from '@teambit/evangelist.surfaces.dropdown';
+
+import styles from './composition-dropdown.module.scss';
+
+export type DropdownItem = { id: string; label: string; href?: string; onClick?: (id: string, e) => void };
+
+export type CompositionDropdownProps = {
+  selected?: Omit<DropdownItem, 'value'>;
+  dropdownItems: Array<DropdownItem>;
+};
+
+export function CompositionDropdown(props: CompositionDropdownProps) {
+  const { selected, dropdownItems: data } = props;
+  const key = (item: DropdownItem) => `${item.id}-${item.href}`;
+
+  return (
+    <Dropdown
+      dropClass={styles.menu}
+      placeholder={
+        <div className={styles.placeholder}>
+          <div>{selected && selected.label}</div>
+          <Icon of="fat-arrow-down" />
+        </div>
+      }
+    >
+      {data.map((item) => {
+        return <MenuItem key={key(item)} current={item} selected={selected} />;
+      })}
+    </Dropdown>
+  );
+}
+
+type MenuItemProps = {
+  selected?: Omit<DropdownItem, 'value'>;
+  current: DropdownItem;
+};
+
+function MenuItem(props: MenuItemProps) {
+  const { selected, current } = props;
+
+  // const isCurrent = selected?.id === current.id;
+  const currentVersionRef = useRef<HTMLDivElement>(null);
+
+  // useEffect(() => {
+  //   if (isCurrent) {
+  //     currentVersionRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  //   }
+  // }, [isCurrent]);
+
+  const onClick = (!!current.onClick && ((e) => current.onClick?.(current.id, e))) || undefined;
+
+  return (
+    <div ref={currentVersionRef} key={`${current.href}-container`}>
+      {/* @ts-ignore */}
+      <MenuLinkItem key={current.href} active={current.id === selected?.id} href={current.href} onClick={onClick}>
+        <div>{current.label}</div>
+      </MenuLinkItem>
+    </div>
+  );
+}
diff --git a/components/ui/composition-compare/index.ts b/components/ui/composition-compare/index.ts
new file mode 100644
index 000000000000..f8c9f870bcad
--- /dev/null
+++ b/components/ui/composition-compare/index.ts
@@ -0,0 +1,2 @@
+export { CompositionCompare } from './composition-compare';
+export { useCompositionCompare, CompositionCompareContext } from './composition-compare.context';
diff --git a/components/ui/composition-live-controls/composition-live-controls.docs.mdx b/components/ui/composition-live-controls/composition-live-controls.docs.mdx
new file mode 100644
index 000000000000..0d92d1932636
--- /dev/null
+++ b/components/ui/composition-live-controls/composition-live-controls.docs.mdx
@@ -0,0 +1,131 @@
+---
+description: Utils for composition live controls.
+---
+
+Utils for composition live controls.
+
+## Usage
+
+Types for live controls.
+
+```ts
+type Controls,
+
+type Control,
+type ControlInputType,
+
+type ControlBase,
+type ControlUnknown,
+type ControlBoolean,
+type ControlSelect,
+type ControlMultiSelect,
+type ControlText,
+type ControlLongText,
+type ControlNumber,
+type ControlRange,
+type ControlDate,
+type ControlJSON,
+type ControlColor,
+type ControlCustom,
+
+type SelectOption,
+```
+
+Utils to resolve controls and values.
+
+```ts
+/**
+ * Controls can be an array or a map.
+ * This function is designed to resolve controls into array.
+ */
+function resolveControls(controls: Controls): Control[];
+
+/**
+ * Resolves controls from values.
+ * It will return an array of controls based on the type of values in each key.
+ */
+function resolveControlsFromValues(values: Record<string, any>): Control[];
+
+/**
+ * Applies default values from controls to props.
+ */
+function resolveValues(values: Record<string, any>, controls: Control[]): Record<string, any>;
+
+/**
+ * Resolves all the data from given values and controls.
+ */
+function resolveAll(values: Record<string, any>, controls: Controls): [Record<string, any>, Control[]];
+```
+
+Communication between the preview and the control panel via postMessage.
+Usually each message includes type and payload data.
+All the utils use `JSON.parse(JSON.stringify())` to deep clone the data.
+And all the listeners filter the messages by type.
+
+```ts
+const BROADCAST_READY_KEY = 'composition-live-controls:ready'
+const BROADCAST_UPDATE_KEY = 'composition-live-controls:update'
+const BROADCAST_DESTROY_KEY = 'composition-live-controls:destroy'
+
+function broadcastReady(
+  target: Window,
+  id: number,
+  controls: Control[],
+  values: Record<string, any>,
+)
+
+function broadcastUpdate(
+  target: Window,
+  id: number,
+  values: Record<string, any>,
+)
+
+function broadcastDestroy(
+  target: Window,
+  id: number,
+)
+
+type LiveControlReadyEventData,
+type LiveControlUpdateEventData,
+type LiveControlDestroyEventData,
+type LiveControlEventData,
+
+function getReadyListener(
+  event: MessageEvent<LiveControlReadyEventData>,
+  callback: (data: {
+    controls: Control[],
+    values: Record<string, any>,
+    timestamp: number,
+  }) => void
+)
+
+function getUpdateListener(
+  event: MessageEvent<LiveControlUpdateEventData>,
+  callback: (data: {
+    key: string,
+    value: any,
+    timestamp: number,
+  }) => void
+)
+
+function getDestroyListener
+  event: MessageEvent<LiveControlDestroyEventData>,
+  callback: (data: {
+    timestamp: number,
+  }) => void
+)
+```
+
+Generic type of live compositions.
+
+```ts
+type LiveComposition<Component = any, RenderResult = any>
+```
+
+Detect whether live controls is needed according to the current URL
+
+```
+// e.g. `http://localhost:3000/preview/bitdev.react/react-env@xxx/#teambit.vite/examples/foo?preview=compositions&env=bitdev.react/react-env@xxx&name=BasicFoo&fullscreen=true&livecontrols=true`
+// e.g. `http://xxx.bit.cloud/api/bitdev.react/react-env@xxx/#teambit.vite/examples/foo?preview=compositions&env=bitdev.react/react-env@xxx&name=BasicFoo&fullscreen=true&livecontrols=true`
+function needLiveControls(loc: Location): boolean
+```
diff --git a/components/ui/composition-live-controls/composition-live-controls.tsx b/components/ui/composition-live-controls/composition-live-controls.tsx
new file mode 100644
index 000000000000..1de35661936a
--- /dev/null
+++ b/components/ui/composition-live-controls/composition-live-controls.tsx
@@ -0,0 +1,394 @@
+export type ControlInputType =
+  | 'text'
+  | 'longtext'
+  | 'number'
+  | 'range'
+  | 'boolean'
+  | 'select'
+  | 'multiselect'
+  | 'date'
+  | 'color'
+  | 'json'
+  | 'custom';
+
+export type SelectOption =
+  | string
+  | {
+      label: string;
+      value: string;
+    };
+
+export type ControlBase = {
+  id: string;
+  input?: string;
+  defaultValue?: any;
+  label?: string;
+  type?: string | Function; // e.g. 'string', 'number', 'boolean', Date, Object, etc.
+};
+
+export type ControlUnknown = {
+  defaultValue?: any;
+};
+
+export type ControlBoolean = {
+  input: 'boolean'; // <input type="checkbox">
+  defaultValue?: boolean;
+};
+
+export type ControlSelect = {
+  input: 'select'; // <select>
+  options: Array<SelectOption>;
+  defaultValue?: string;
+  inline?: boolean; // <input type="radio"> x n
+};
+
+export type ControlMultiSelect = {
+  input: 'multiselect'; // <select multiple>
+  options: Array<SelectOption>;
+  defaultValue?: Array<string>;
+  inline?: boolean; // <input type="checkbox"> x n
+};
+
+export type ControlText = {
+  input: 'text'; // <input type="text">
+  defaultValue?: string;
+};
+
+export type ControlLongText = {
+  input: 'longtext'; // <textarea>
+  defaultValue?: string;
+};
+
+export type ControlNumber = {
+  input: 'number'; // <input type="number">
+  defaultValue?: number;
+};
+
+export type ControlRange = {
+  input: 'range'; // <input type="range">
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+};
+
+export type ControlDate = {
+  input: 'date'; // <input type="date">
+  defaultValue?: string;
+};
+
+export type ControlJSON = {
+  input: 'json'; // <textarea>
+  defaultValue?: any;
+};
+
+export type ControlColor = {
+  input: 'color'; // <input type="color">
+  defaultValue?: string;
+};
+
+export type ControlCustom<RenderFn = any, ValueType = any> = {
+  input: 'custom';
+  defaultValue?: ValueType;
+  render: RenderFn;
+  renderOptions?: Record<string, any>;
+};
+
+export type Control = ControlBase &
+  (
+    | ControlBoolean
+    | ControlSelect
+    | ControlMultiSelect
+    | ControlText
+    | ControlLongText
+    | ControlNumber
+    | ControlRange
+    | ControlDate
+    | ControlJSON
+    | ControlColor
+    | ControlCustom
+    | ControlUnknown
+  );
+
+// This utility type is used to omit a key from a type, but it distributes over union types.
+// This is useful for ensuring that the type is correctly applied to each member of a union.
+// It is similar to the built-in Omit type, but it works with union types.
+type DistributiveOmit<T, K extends keyof T> = T extends any ? Omit<T, K> : never;
+
+export type Controls = Array<Control> | Record<string, DistributiveOmit<Control, 'id'>>;
+
+function resolveControlMap(controls: Controls): Control[] {
+  if (Array.isArray(controls)) {
+    return controls;
+  }
+  if (typeof controls === 'object') {
+    return Object.keys(controls).map((key) => ({
+      ...controls[key],
+      id: key,
+    }));
+  }
+  return [];
+}
+
+function resolveControlInput(control: Control): Control {
+  const { type } = control;
+  let newInput = control.input;
+  if (!newInput) {
+    if (typeof type === 'string') {
+      switch (type) {
+        case 'boolean':
+          newInput = 'boolean';
+          break;
+        case 'string':
+          newInput = 'text';
+          break;
+        case 'number':
+          newInput = 'number';
+          break;
+        case 'date':
+          newInput = 'date';
+          break;
+        case 'object':
+          newInput = 'json';
+          break;
+        default:
+          newInput = 'text';
+      }
+    } else if (typeof type === 'function') {
+      if (type === Boolean) {
+        newInput = 'boolean';
+      } else if (type === String) {
+        newInput = 'text';
+      } else if (type === Number) {
+        newInput = 'number';
+      } else if (type === Date) {
+        newInput = 'date';
+      } else if (type === Object) {
+        newInput = 'json';
+      } else {
+        newInput = 'text';
+      }
+    } else {
+      newInput = 'text';
+    }
+  }
+  return { ...control, input: newInput };
+}
+
+/**
+ * Controls can be an array or a map.
+ * This function is designed to resolve controls into array.
+ */
+export function resolveControls(controls: Controls): Control[] {
+  return resolveControlMap(controls).map(resolveControlInput);
+}
+
+function getTypeFromValue(value: any): any {
+  if (value === null) {
+    return null;
+  }
+  if (typeof value === 'string') {
+    return String;
+  }
+  if (typeof value === 'number') {
+    return Number;
+  }
+  if (typeof value === 'boolean') {
+    return Boolean;
+  }
+  if (value instanceof Date) {
+    return Date;
+  }
+  if (Array.isArray(value)) {
+    return Array;
+  }
+  if (typeof value === 'object') {
+    return Object;
+  }
+  return String;
+}
+
+/**
+ * Resolves controls from values.
+ * It will return an array of controls based on the type of values in each key.
+ */
+export function resolveControlsFromValues(values: Record<string, any>): Control[] {
+  return Object.keys(values).map((key) => {
+    const control: Control = {
+      id: key,
+      type: getTypeFromValue(values[key]),
+    };
+    return resolveControlInput(control);
+  });
+}
+
+/**
+ * Applies default values from controls to props.
+ */
+export function resolveValues(values: Record<string, any>, controls: Control[]): Record<string, any> {
+  const initValue: Record<string, any> = {};
+  controls.forEach((control) => {
+    const { id, defaultValue } = control;
+    if (id in values) {
+      initValue[id] = values[id];
+    } else {
+      initValue[id] = defaultValue;
+    }
+  });
+  return initValue;
+}
+
+/**
+ * Resolves all the data from given values and controls.
+ */
+export function resolveAll(values: Record<string, any>, controls: Controls): [Record<string, any>, Control[]] {
+  const cs = controls ? resolveControls(controls) : resolveControlsFromValues(values);
+  const vs = resolveValues(values, cs);
+  return [vs, cs];
+}
+
+export const BROADCAST_READY_KEY = 'composition-live-controls:ready';
+
+export const BROADCAST_UPDATE_KEY = 'composition-live-controls:update';
+
+export const BROADCAST_DESTROY_KEY = 'composition-live-controls:destroy';
+
+export function broadcastReady(
+  target: Window,
+  timestamp: number,
+  controls: Control[],
+  values: Record<string, any>,
+  channel = 'default'
+) {
+  target.postMessage(
+    {
+      type: BROADCAST_READY_KEY,
+      payload: JSON.parse(
+        JSON.stringify({
+          timestamp,
+          controls,
+          values,
+          channel,
+        })
+      ),
+    },
+    '*'
+  );
+}
+
+export function broadcastUpdate(
+  target: Window,
+  id: number,
+  { key, value }: { key: string; value: any },
+  channel = 'default'
+) {
+  target.postMessage(
+    {
+      type: BROADCAST_UPDATE_KEY,
+      payload: JSON.parse(
+        JSON.stringify({
+          timestamp: id,
+          key,
+          value,
+          channel,
+        })
+      ),
+    },
+    '*'
+  );
+}
+
+export function broadcastDestroy(target: Window, id: number, channel = 'default') {
+  target.postMessage(
+    {
+      type: BROADCAST_DESTROY_KEY,
+      payload: JSON.parse(
+        JSON.stringify({
+          timestamp: id,
+          channel,
+        })
+      ),
+    },
+    '*'
+  );
+}
+
+export type LiveControlReadyEventData = {
+  type: 'composition-live-controls:ready';
+  payload: {
+    timestamp: number;
+    controls: Array<Control>;
+    values: Record<string, any>;
+    channel?: string;
+  };
+};
+
+export type LiveControlUpdateEventData = {
+  type: 'composition-live-controls:update';
+  payload: {
+    timestamp: number;
+    key: string;
+    value: any;
+    channel?: string;
+  };
+};
+
+export type LiveControlDestroyEventData = {
+  type: 'composition-live-controls:destroy';
+  payload: {
+    timestamp: number;
+    channel?: string;
+  };
+};
+
+export type LiveControlEventData = LiveControlUpdateEventData | LiveControlReadyEventData | LiveControlDestroyEventData;
+
+export function getReadyListener(
+  event: MessageEvent<LiveControlReadyEventData>,
+  callback: (data: { timestamp: number; controls: Control[]; values: Record<string, any>; channel?: string }) => void
+) {
+  if (!event.data || event.data.type !== BROADCAST_READY_KEY) return;
+  callback(JSON.parse(JSON.stringify(event.data.payload)));
+}
+
+export function getUpdateListener(
+  event: MessageEvent<LiveControlUpdateEventData>,
+  callback: (data: { timestamp: number; key: string; value: any; channel?: string }) => void
+) {
+  if (!event.data || event.data.type !== BROADCAST_UPDATE_KEY) return;
+  callback(JSON.parse(JSON.stringify(event.data.payload)));
+}
+
+export function getDestroyListener(
+  event: MessageEvent<LiveControlDestroyEventData>,
+  callback: (data: { timestamp: number; channel?: string }) => void
+) {
+  if (!event.data || event.data.type !== BROADCAST_DESTROY_KEY) return;
+  callback(JSON.parse(JSON.stringify(event.data.payload)));
+}
+
+export type LiveComposition<Component = any, RenderResult = any> = {
+  component: Component;
+  props: Record<string, any>;
+  controls?: Controls;
+  render?: (args: Record<string, any>, Comp: Component) => RenderResult;
+  noControls?: boolean;
+};
+
+export type ChannelName = string;
+export type LiveControlsSubscriber = {
+  iframeWindow: Window;
+  timestamp: number;
+};
+
+// e.g. `http://localhost:3000/preview/bitdev.react/react-env@xxx/#teambit.vite/examples/foo?preview=compositions&env=bitdev.react/react-env@xxx&name=BasicFoo&fullscreen=true&livecontrols=true`
+// e.g. `http://xxx.bit.cloud/api/bitdev.react/react-env@xxx/#teambit.vite/examples/foo?preview=compositions&env=bitdev.react/react-env@xxx&name=BasicFoo&fullscreen=true&livecontrols=true`
+export function needLiveControls({ hash }: Location): boolean {
+  const params = new URLSearchParams(hash.slice(hash.indexOf('?') + 1));
+  return params.has('livecontrols') && params.get('livecontrols') === 'true';
+}
+
+export function getLiveControlsChannel(location: Location): string {
+  const params = new URLSearchParams(location.hash.slice(location.hash.indexOf('?') + 1));
+  return params.get('lcchannel') || 'default';
+}
diff --git a/components/ui/composition-live-controls/index.ts b/components/ui/composition-live-controls/index.ts
new file mode 100644
index 000000000000..4c3b9cbae055
--- /dev/null
+++ b/components/ui/composition-live-controls/index.ts
@@ -0,0 +1,49 @@
+export {
+  type ControlInputType,
+  type SelectOption,
+  type ControlBase,
+  type ControlUnknown,
+  type ControlBoolean,
+  type ControlSelect,
+  type ControlMultiSelect,
+  type ControlText,
+  type ControlLongText,
+  type ControlNumber,
+  type ControlRange,
+  type ControlDate,
+  type ControlJSON,
+  type ControlColor,
+  type ControlCustom,
+  type Control,
+  type Controls,
+  resolveControls,
+  resolveValues,
+  resolveControlsFromValues,
+  resolveAll,
+  BROADCAST_READY_KEY,
+  BROADCAST_UPDATE_KEY,
+  BROADCAST_DESTROY_KEY,
+  broadcastReady,
+  broadcastUpdate,
+  broadcastDestroy,
+  type LiveControlReadyEventData,
+  type LiveControlUpdateEventData,
+  type LiveControlDestroyEventData,
+  type LiveControlEventData,
+  getReadyListener,
+  getUpdateListener,
+  getDestroyListener,
+  type LiveComposition,
+  needLiveControls,
+  getLiveControlsChannel,
+} from './composition-live-controls.js';
+
+export {
+  type LiveControlsSubscriber,
+  type ChannelState,
+  liveControlsRegistry,
+  LiveControlsRegistry,
+  type ChannelName,
+} from './live-controls-registry.js';
+
+export { useLiveControls, type UseLiveControlsResult } from './use-live-controls.js';
diff --git a/components/ui/composition-live-controls/live-controls-registry.ts b/components/ui/composition-live-controls/live-controls-registry.ts
new file mode 100644
index 000000000000..11bdcf962a79
--- /dev/null
+++ b/components/ui/composition-live-controls/live-controls-registry.ts
@@ -0,0 +1,176 @@
+/* eslint-disable no-console */
+import { Control } from './composition-live-controls';
+
+export type ChannelName = string;
+
+export type LiveControlsSubscriber = {
+  iframeWindow: Window;
+  timestamp: number;
+};
+
+export type ChannelState = {
+  defs: Array<Control>;
+  values: Record<string, any>;
+  ready: boolean;
+  timestamps: Map<Window, number>;
+};
+
+export class LiveControlsRegistry {
+  private channels = new Map<ChannelName, LiveControlsSubscriber[]>();
+
+  private state = new Map<ChannelName, ChannelState>();
+
+  private readonly DEFAULT_CHANNEL = 'default';
+
+  private normalize(channel?: ChannelName) {
+    return channel || this.DEFAULT_CHANNEL;
+  }
+
+  private ensureState(key: ChannelName): ChannelState {
+    if (!this.state.has(key)) {
+      this.state.set(key, {
+        defs: [],
+        values: {},
+        ready: false,
+        timestamps: new Map(),
+      });
+    }
+    return this.state.get(key)!;
+  }
+
+  private ensureSubscribers(key: ChannelName): LiveControlsSubscriber[] {
+    if (!this.channels.has(key)) {
+      this.channels.set(key, []);
+    }
+    return this.channels.get(key)!;
+  }
+
+  register(channel: ChannelName, iframeWindow: Window, timestamp: number) {
+    const key = this.normalize(channel);
+
+    const list = this.ensureSubscribers(key);
+    if (!list.find((s) => s.iframeWindow === iframeWindow)) {
+      list.push({ iframeWindow, timestamp });
+    }
+
+    const st = this.ensureState(key);
+    st.timestamps.set(iframeWindow, timestamp);
+  }
+
+  unregister(channel: ChannelName, iframeWindow: Window) {
+    const key = this.normalize(channel);
+
+    const list = this.channels.get(key);
+    if (list) {
+      this.channels.set(
+        key,
+        list.filter((s) => s.iframeWindow !== iframeWindow)
+      );
+    }
+
+    const st = this.state.get(key);
+    if (st) {
+      st.timestamps.delete(iframeWindow);
+      if (st.timestamps.size === 0) {
+        st.ready = false;
+      }
+    }
+  }
+
+  getSubscribers(channel?: ChannelName): LiveControlsSubscriber[] {
+    const key = this.normalize(channel);
+    return this.channels.get(key) || [];
+  }
+
+  registerReadyState(channel: ChannelName, defs: any[], values: Record<string, any>, timestamp: number, win: Window) {
+    const key = this.normalize(channel);
+    const st = this.ensureState(key);
+
+    st.timestamps.set(win, timestamp);
+
+    st.defs = defs.length ? defs : st.defs;
+    st.values = { ...st.values, ...values };
+
+    st.ready = st.timestamps.size > 0;
+
+    this.state.set(key, st);
+  }
+
+  updateValue(channel: ChannelName, key: string, value: any) {
+    const st = this.state.get(channel);
+    if (!st) return;
+
+    st.values[key] = value;
+  }
+
+  getState(channel: ChannelName): ChannelState | undefined {
+    return this.state.get(channel);
+  }
+
+  getMergedState(channels: string[]) {
+    const defsMap: Record<string, any> = {};
+    const values: Record<string, any> = {};
+    let ready = false;
+
+    channels.forEach((ch) => {
+      const s = this.state.get(ch);
+      if (!s) return;
+
+      s.defs.forEach((d) => {
+        defsMap[d.id] = d;
+      });
+
+      Object.assign(values, s.values);
+
+      if (s.ready) ready = true;
+    });
+
+    return {
+      defs: Object.values(defsMap),
+      values,
+      ready,
+    };
+  }
+
+  broadcastUpdate(channel: ChannelName, key: string, value: any) {
+    const subs = this.getSubscribers(channel);
+    subs.forEach((sub) => {
+      try {
+        sub.iframeWindow.postMessage(
+          {
+            type: 'composition-live-controls:update',
+            payload: { channel, key, value },
+          },
+          '*'
+        );
+      } catch (err) {
+        console.error('broadcast failed', err);
+      }
+    });
+  }
+
+  broadcastUpdateToChannels(channels: string[], key: string, value: any) {
+    channels.forEach((ch) => {
+      this.broadcastUpdate(ch, key, value);
+    });
+  }
+
+  resetTimestamps(channels: string[]) {
+    channels.forEach((ch) => {
+      const st = this.state.get(ch);
+      if (!st) return;
+
+      st.timestamps.clear();
+      st.ready = false;
+      st.defs = [];
+      st.values = {};
+    });
+  }
+
+  cleanupAll() {
+    this.channels.clear();
+    this.state.clear();
+  }
+}
+
+export const liveControlsRegistry = new LiveControlsRegistry();
diff --git a/components/ui/composition-live-controls/use-live-controls.ts b/components/ui/composition-live-controls/use-live-controls.ts
new file mode 100644
index 000000000000..12f1ef0e315a
--- /dev/null
+++ b/components/ui/composition-live-controls/use-live-controls.ts
@@ -0,0 +1,93 @@
+import { useEffect, useState, useCallback, useMemo } from 'react';
+import {
+  BROADCAST_READY_KEY,
+  BROADCAST_UPDATE_KEY,
+  BROADCAST_DESTROY_KEY,
+  type Control,
+} from './composition-live-controls';
+import { liveControlsRegistry } from './live-controls-registry';
+
+export type UseLiveControlsResult = {
+  defs: Array<Control>;
+  values: Record<string, any>;
+  ready: boolean;
+  hasLiveControls: boolean;
+  onChange: (key: string, value: any) => void;
+  setTimestamp: (ts: number) => void;
+};
+
+export function useLiveControls(channels?: string[]): UseLiveControlsResult {
+  const activeChannels = useMemo(() => (channels?.length ? channels : ['default']), [channels]);
+
+  const [hasLiveControls, setHasLiveControls] = useState(false);
+  const [state, setState] = useState(() => liveControlsRegistry.getMergedState(activeChannels));
+
+  const onEvent = useCallback(
+    (event: MessageEvent) => {
+      const { data } = event;
+      if (!data?.type) return;
+
+      if (data.type === 'composition-live-controls:activate') {
+        setHasLiveControls(true);
+        return;
+      }
+
+      const channel = data.payload?.channel || 'default';
+      if (!activeChannels.includes(channel)) return;
+
+      if (data.type === BROADCAST_READY_KEY) {
+        liveControlsRegistry.register(channel, event.source as Window, data.payload.timestamp);
+
+        liveControlsRegistry.registerReadyState(
+          channel,
+          data.payload.controls,
+          data.payload.values,
+          data.payload.timestamp,
+          event.source as Window
+        );
+      }
+
+      if (data.type === BROADCAST_UPDATE_KEY) {
+        liveControlsRegistry.updateValue(channel, data.payload.key, data.payload.value);
+      }
+
+      if (data.type === BROADCAST_DESTROY_KEY) {
+        liveControlsRegistry.unregister(channel, event.source as Window);
+      }
+
+      setState(liveControlsRegistry.getMergedState(activeChannels));
+    },
+    [activeChannels]
+  );
+
+  useEffect(() => {
+    window.addEventListener('message', onEvent);
+    return () => window.removeEventListener('message', onEvent);
+  }, [onEvent]);
+
+  const onChange = useCallback(
+    (key: string, value: any) => {
+      liveControlsRegistry.broadcastUpdateToChannels(activeChannels, key, value);
+    },
+    [activeChannels]
+  );
+
+  const setTimestamp = useCallback(
+    (ts: number) => {
+      if (ts === 0) {
+        liveControlsRegistry.resetTimestamps(activeChannels);
+        setState(liveControlsRegistry.getMergedState(activeChannels));
+      }
+    },
+    [activeChannels]
+  );
+
+  return {
+    defs: state.defs,
+    values: state.values,
+    ready: state.ready,
+    hasLiveControls,
+    onChange,
+    setTimestamp,
+  };
+}
diff --git a/scopes/compositions/compositions/index.ts b/scopes/compositions/compositions/index.ts
index 89ef03d8a5b1..4e91fa3a08e0 100644
--- a/scopes/compositions/compositions/index.ts
+++ b/scopes/compositions/compositions/index.ts
@@ -13,5 +13,5 @@ export { Composition } from './composition';
 export type { CompositionContentProps } from './compositions';
 export { CompositionContent } from './compositions';
 export type { CompositionsPreview } from './compositions.preview.runtime';
-export { ComponentComposition } from './ui';
+export { ComponentComposition, LiveControls, LiveControlsRenderer } from './ui';
 export default CompositionsAspect;
diff --git a/scopes/compositions/compositions/ui/compositions-panel/compositions-panel.module.scss b/scopes/compositions/compositions/ui/compositions-panel/compositions-panel.module.scss
index 99404b033546..d65a53ff1857 100644
--- a/scopes/compositions/compositions/ui/compositions-panel/compositions-panel.module.scss
+++ b/scopes/compositions/compositions/ui/compositions-panel/compositions-panel.module.scss
@@ -13,6 +13,7 @@
     border: none;
     border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
   }
+
   > div:last-child {
     border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
   }
@@ -179,3 +180,35 @@
     }
   }
 }
+
+.liveControlsSkeleton {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  opacity: 1;
+  transition:
+    opacity 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.liveControlsSkeleton--hidden {
+  opacity: 0;
+  transform: translateY(2px);
+}
+
+.liveControlsContent {
+  opacity: 1;
+  transition:
+    opacity 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.liveControlsContent--hidden {
+  opacity: 0;
+  transform: translateY(2px);
+}
+
+.loader {
+  color: var(--skeleton-color, #e0e0e0);
+}
diff --git a/scopes/compositions/compositions/ui/compositions-panel/compositions-panel.tsx b/scopes/compositions/compositions/ui/compositions-panel/compositions-panel.tsx
index cf4708a87d99..0c61bb4123a4 100644
--- a/scopes/compositions/compositions/ui/compositions-panel/compositions-panel.tsx
+++ b/scopes/compositions/compositions/ui/compositions-panel/compositions-panel.tsx
@@ -1,17 +1,12 @@
 import { Icon } from '@teambit/evangelist.elements.icon';
 import classNames from 'classnames';
 import { useSearchParams } from 'react-router-dom';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';
 import { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';
 import { Tooltip } from '@teambit/design.ui.tooltip';
 import { useNavigate, useLocation } from '@teambit/base-react.navigation.link';
-import {
-  type LiveControlReadyEventData,
-  getReadyListener,
-  broadcastUpdate,
-} from '@teambit/compositions.ui.composition-live-controls';
-
+import { useLiveControls } from '@teambit/compositions.ui.composition-live-controls';
 import styles from './compositions-panel.module.scss';
 import type { Composition } from '../../composition';
 import { LiveControls } from './live-control-panel';
@@ -54,10 +49,8 @@ export function CompositionsPanel({
   className,
   ...rest
 }: CompositionsPanelProps) {
-  // setup drawer state
-  // TODO: only for alpha versions of live controls. remove when stable.
-  const [hasLiveControls, setHasLiveControls] = useState(false);
   const [openDrawerList, onToggleDrawer] = useState(['COMPOSITIONS', 'LIVE_CONTROLS']);
+  const { hasLiveControls, ready, defs, values, onChange, setTimestamp } = useLiveControls();
   const handleDrawerToggle = (id: string) => {
     const isDrawerOpen = openDrawerList.includes(id);
     if (isDrawerOpen) {
@@ -76,25 +69,19 @@ export function CompositionsPanel({
   const versionFromQueryParams = searchParams.get('version');
   const navigate = useNavigate();
 
-  // live control state
-  const [controlsTimestamp, setControlsTimestamp] = useState(0);
-  const [controlsDefs, setControlsDefs] = useState<any>(null);
-  const [controlsValues, setControlsValues] = useState<any>({});
-  const [mounter, setMounter] = useState<Window>();
-
   // composition navigation action
   const handleSelect = useCallback(
     (selected: Composition) => {
       onSelect && onSelect(selected);
       if (selected === active) return;
-      setControlsTimestamp(0);
+      setTimestamp(0);
     },
     [onSelect]
   );
   const onCompositionCodeClicked = useCallback(
     (composition: Composition) => (e: React.MouseEvent<HTMLDivElement>) => {
       e.preventDefault();
-      setControlsTimestamp(0);
+      setTimestamp(0);
       const queryParams = new URLSearchParams();
       if (versionFromQueryParams) {
         queryParams.set('version', versionFromQueryParams);
@@ -105,44 +92,6 @@ export function CompositionsPanel({
     [location?.pathname, versionFromQueryParams]
   );
 
-  // listen to the mounter for live control updates
-  useEffect(() => {
-    // TODO: remove when stable.
-    window.addEventListener('message', (e: MessageEvent) => {
-      if (e.data.type === 'composition-live-controls:activate') {
-        setHasLiveControls(true);
-      }
-    });
-
-    function onLiveControlsSetup(e: MessageEvent<LiveControlReadyEventData>) {
-      getReadyListener(e, ({ controls, values, timestamp }) => {
-        const iframeWindow = e.source;
-        setMounter(iframeWindow as Window);
-        setControlsDefs(controls);
-        setControlsValues(values);
-        setControlsTimestamp(timestamp);
-      });
-    }
-    window.addEventListener('message', onLiveControlsSetup);
-    return () => {
-      window.removeEventListener('message', onLiveControlsSetup);
-    };
-  }, []);
-
-  // sync live control updates back to the mounter
-  const onLiveControlsUpdate = useCallback(
-    (key: string, value: any) => {
-      if (mounter) {
-        broadcastUpdate(mounter, controlsTimestamp, {
-          key,
-          value,
-        });
-      }
-      setControlsValues((prev: any) => ({ ...prev, [key]: value }));
-    },
-    [mounter, controlsValues, controlsTimestamp]
-  );
-
   return (
     <div className={classNames(styles.container)}>
       <DrawerUI
@@ -182,22 +131,20 @@ export function CompositionsPanel({
           })}
         </ul>
       </DrawerUI>
-      {
-        /* TODO: remove when stable */ hasLiveControls ? (
-          <DrawerUI
-            isOpen={openDrawerList.includes('LIVE_CONTROLS')}
-            onToggle={() => handleDrawerToggle('LIVE_CONTROLS')}
-            className={classNames(styles.tab)}
-            name="LIVE CONTROLS"
-          >
-            {controlsTimestamp ? (
-              <LiveControls defs={controlsDefs} values={controlsValues} onChange={onLiveControlsUpdate} />
-            ) : (
-              <div className={styles.noLiveControls}>No live controls available for this composition</div>
-            )}
-          </DrawerUI>
-        ) : null
-      }
+      {hasLiveControls ? (
+        <DrawerUI
+          name="LIVE CONTROLS"
+          className={classNames(styles.tab, className)}
+          isOpen={openDrawerList.includes('LIVE_CONTROLS')}
+          onToggle={() => handleDrawerToggle('LIVE_CONTROLS')}
+        >
+          {ready ? (
+            <LiveControls defs={defs} values={values} onChange={onChange} />
+          ) : (
+            <div className={styles.noLiveControls}>No live controls available for this composition</div>
+          )}
+        </DrawerUI>
+      ) : null}
     </div>
   );
 }
diff --git a/scopes/compositions/compositions/ui/compositions-panel/live-controls-renderer.tsx b/scopes/compositions/compositions/ui/compositions-panel/live-controls-renderer.tsx
new file mode 100644
index 000000000000..2bcdb0f03399
--- /dev/null
+++ b/scopes/compositions/compositions/ui/compositions-panel/live-controls-renderer.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { LiveControls } from './live-control-panel';
+import { useLiveControls } from '@teambit/compositions.ui.composition-live-controls';
+
+export function LiveControlsRenderer() {
+  const { hasLiveControls, ready, defs, values, onChange } = useLiveControls();
+
+  if (!hasLiveControls) return null;
+
+  if (!ready) {
+    return <div style={{ padding: 12, opacity: 0.7 }}>No live controls available.</div>;
+  }
+
+  return <LiveControls defs={defs} values={values} onChange={onChange} />;
+}
diff --git a/scopes/compositions/compositions/ui/index.ts b/scopes/compositions/compositions/ui/index.ts
index dd6ff1c1bd32..d958a8f84e16 100644
--- a/scopes/compositions/compositions/ui/index.ts
+++ b/scopes/compositions/compositions/ui/index.ts
@@ -1 +1,3 @@
 export { ComponentComposition } from './composition-preview';
+export { LiveControls } from './compositions-panel/live-control-panel';
+export { LiveControlsRenderer } from './compositions-panel/live-controls-renderer';
diff --git a/workspace.jsonc b/workspace.jsonc
index 3c3d5fe9740a..8217c2a9d7a8 100644
--- a/workspace.jsonc
+++ b/workspace.jsonc
@@ -186,9 +186,6 @@
         "@teambit/component.ui.deprecation-icon": "^0.0.509",
         "@teambit/component.ui.hooks.use-fetch-docs": "^0.0.21",
         "@teambit/component.ui.version-label": "^0.0.509",
-        "@teambit/compositions.ui.composition-compare": "^0.0.258",
-        "@teambit/compositions.ui.composition-compare-section": "^0.0.101",
-        "@teambit/compositions.ui.composition-live-controls": "^0.0.3",
         "@teambit/compositions.ui.compositions-menu-bar": "^0.0.177",
         "@teambit/compositions.ui.compositions-overview": "^0.0.10",
         "@teambit/compositions.ui.hooks.use-composition": "^0.0.177",