diff --git a/blocksuite/affine/components/package.json b/blocksuite/affine/components/package.json
index adf2d7c9d3a57..d5ba4c9cb8aeb 100644
--- a/blocksuite/affine/components/package.json
+++ b/blocksuite/affine/components/package.json
@@ -36,6 +36,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./ai-item": "./src/ai-item/index.ts",
+    "./color-picker": "./src/color-picker/index.ts",
     "./icons": "./src/icons/index.ts",
     "./peek": "./src/peek/index.ts",
     "./portal": "./src/portal/index.ts",
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts b/blocksuite/affine/components/src/color-picker/button.ts
similarity index 97%
rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts
rename to blocksuite/affine/components/src/color-picker/button.ts
index e71578d5d654e..f324d1d1c1c72 100644
--- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts
+++ b/blocksuite/affine/components/src/color-picker/button.ts
@@ -1,6 +1,6 @@
-import type { EditorMenuButton } from '@blocksuite/affine-components/toolbar';
 import type { ColorScheme, Palette } from '@blocksuite/affine-model';
 import { resolveColor } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
@@ -8,7 +8,7 @@ import { choose } from 'lit/directives/choose.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import type { ColorEvent } from '../panel/color-panel.js';
+import type { EditorMenuButton } from '../toolbar/menu-button.js';
 import type { ModeType, PickColorEvent, PickColorType } from './types.js';
 import { keepColor, preprocessColor, rgbaToHex8 } from './utils.js';
 
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/color-picker.ts b/blocksuite/affine/components/src/color-picker/color-picker.ts
similarity index 100%
rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/color-picker.ts
rename to blocksuite/affine/components/src/color-picker/color-picker.ts
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/consts.ts b/blocksuite/affine/components/src/color-picker/consts.ts
similarity index 100%
rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/consts.ts
rename to blocksuite/affine/components/src/color-picker/consts.ts
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts b/blocksuite/affine/components/src/color-picker/custom-button.ts
similarity index 100%
rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts
rename to blocksuite/affine/components/src/color-picker/custom-button.ts
diff --git a/blocksuite/affine/components/src/color-picker/index.ts b/blocksuite/affine/components/src/color-picker/index.ts
new file mode 100644
index 0000000000000..b22f3b4da55c1
--- /dev/null
+++ b/blocksuite/affine/components/src/color-picker/index.ts
@@ -0,0 +1,20 @@
+import { EdgelessColorPickerButton } from './button.js';
+import { EdgelessColorPicker } from './color-picker.js';
+import { EdgelessColorCustomButton } from './custom-button.js';
+
+export * from './button.js';
+export * from './color-picker.js';
+export * from './types.js';
+export * from './utils.js';
+
+export function effects() {
+  customElements.define('edgeless-color-picker', EdgelessColorPicker);
+  customElements.define(
+    'edgeless-color-picker-button',
+    EdgelessColorPickerButton
+  );
+  customElements.define(
+    'edgeless-color-custom-button',
+    EdgelessColorCustomButton
+  );
+}
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/styles.ts b/blocksuite/affine/components/src/color-picker/styles.ts
similarity index 100%
rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/styles.ts
rename to blocksuite/affine/components/src/color-picker/styles.ts
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/types.ts b/blocksuite/affine/components/src/color-picker/types.ts
similarity index 100%
rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/types.ts
rename to blocksuite/affine/components/src/color-picker/types.ts
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/utils.ts b/blocksuite/affine/components/src/color-picker/utils.ts
similarity index 100%
rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/utils.ts
rename to blocksuite/affine/components/src/color-picker/utils.ts
diff --git a/blocksuite/affine/shared/src/utils/event.ts b/blocksuite/affine/shared/src/utils/event.ts
index 56edcce8ea236..daa5a6e3958d8 100644
--- a/blocksuite/affine/shared/src/utils/event.ts
+++ b/blocksuite/affine/shared/src/utils/event.ts
@@ -1,3 +1,4 @@
+import type { Palette } from '@blocksuite/affine-model';
 import { IS_IOS, IS_MAC } from '@blocksuite/global/env';
 
 export function isTouchPadPinchEvent(e: WheelEvent) {
@@ -347,3 +348,19 @@ export const createKeydownObserver = ({
   // Fix composition input
   target.addEventListener('compositionend', () => onInput?.(true), { signal });
 };
+
+export class ColorEvent extends Event {
+  detail: Palette;
+
+  constructor(
+    type: string,
+    {
+      detail,
+      composed,
+      bubbles,
+    }: { detail: Palette; composed: boolean; bubbles: boolean }
+  ) {
+    super(type, { bubbles, composed });
+    this.detail = detail;
+  }
+}
diff --git a/blocksuite/blocks/src/effects.ts b/blocksuite/blocks/src/effects.ts
index 762d14a189e49..07c6cf021c79f 100644
--- a/blocksuite/blocks/src/effects.ts
+++ b/blocksuite/blocks/src/effects.ts
@@ -18,6 +18,7 @@ import { effects as componentAiItemEffects } from '@blocksuite/affine-components
 import { BlockSelection } from '@blocksuite/affine-components/block-selection';
 import { BlockZeroWidth } from '@blocksuite/affine-components/block-zero-width';
 import { effects as componentCaptionEffects } from '@blocksuite/affine-components/caption';
+import { effects as componentColorPickerEffects } from '@blocksuite/affine-components/color-picker';
 import { effects as componentContextMenuEffects } from '@blocksuite/affine-components/context-menu';
 import { effects as componentDatePickerEffects } from '@blocksuite/affine-components/date-picker';
 import { effects as componentDragIndicatorEffects } from '@blocksuite/affine-components/drag-indicator';
@@ -43,9 +44,6 @@ import { EdgelessAutoCompletePanel } from './root-block/edgeless/components/auto
 import { EdgelessAutoComplete } from './root-block/edgeless/components/auto-complete/edgeless-auto-complete.js';
 import { EdgelessToolIconButton } from './root-block/edgeless/components/buttons/tool-icon-button.js';
 import { EdgelessToolbarButton } from './root-block/edgeless/components/buttons/toolbar-button.js';
-import { EdgelessColorPickerButton } from './root-block/edgeless/components/color-picker/button.js';
-import { EdgelessColorPicker } from './root-block/edgeless/components/color-picker/color-picker.js';
-import { EdgelessColorCustomButton } from './root-block/edgeless/components/color-picker/custom-button.js';
 import { EdgelessConnectorHandle } from './root-block/edgeless/components/connector/connector-handle.js';
 import {
   NOTE_SLICER_WIDGET,
@@ -221,6 +219,7 @@ export function effects() {
   componentDragIndicatorEffects();
   componentToggleButtonEffects();
   componentAiItemEffects();
+  componentColorPickerEffects();
 
   widgetScrollAnchoringEffects();
   widgetMobileToolbarEffects();
@@ -241,10 +240,6 @@ export function effects() {
     'edgeless-copilot-toolbar-entry',
     EdgelessCopilotToolbarEntry
   );
-  customElements.define(
-    'edgeless-color-custom-button',
-    EdgelessColorCustomButton
-  );
   customElements.define('edgeless-connector-handle', EdgelessConnectorHandle);
   customElements.define('edgeless-zoom-toolbar', EdgelessZoomToolbar);
   customElements.define(
@@ -331,13 +326,8 @@ export function effects() {
     EdgelessNavigatorSettingButton
   );
   customElements.define('edgeless-present-button', EdgelessPresentButton);
-  customElements.define('edgeless-color-picker', EdgelessColorPicker);
   customElements.define('overlay-scrollbar', OverlayScrollbar);
   customElements.define('affine-template-loading', AffineTemplateLoading);
-  customElements.define(
-    'edgeless-color-picker-button',
-    EdgelessColorPickerButton
-  );
   customElements.define('edgeless-auto-complete', EdgelessAutoComplete);
   customElements.define(
     'edgeless-font-weight-and-style-panel',
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/index.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/index.ts
deleted file mode 100644
index cedd0c79740bb..0000000000000
--- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './button.js';
-export * from './color-picker.js';
-export * from './types.js';
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts
index 3f76a3f93aeb6..198449d8ac3a1 100644
--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts
@@ -1,6 +1,7 @@
 import type { Color, ColorScheme, Palette } from '@blocksuite/affine-model';
 import { isTransparent, resolveColor } from '@blocksuite/affine-model';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { css, html, LitElement, nothing, svg, type TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -8,22 +9,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 import isEqual from 'lodash.isequal';
 
-export class ColorEvent extends Event {
-  detail: Palette;
-
-  constructor(
-    type: string,
-    {
-      detail,
-      composed,
-      bubbles,
-    }: { detail: Palette; composed: boolean; bubbles: boolean }
-  ) {
-    super(type, { bubbles, composed });
-    this.detail = detail;
-  }
-}
-
 function TransparentIcon(hollowCircle = false) {
   const CircleIcon: TemplateResult | typeof nothing = hollowCircle
     ? svg`<circle cx="10" cy="10" r="8" fill="white" />`
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts
index 5fb4fa543c9df..23362f35fee46 100644
--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts
@@ -3,11 +3,11 @@ import {
   DefaultTheme,
   type StrokeStyle,
 } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { ColorEvent } from './color-panel.js';
 import { type LineStyleEvent, LineStylesPanel } from './line-styles-panel.js';
 
 export class StrokeStylePanel extends WithDisposable(LitElement) {
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts
index 5441c110c606c..0ab04a116b4f3 100644
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts
@@ -3,13 +3,13 @@ import {
   EditPropsStore,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import { SignalWatcher } from '@blocksuite/global/utils';
 import { computed } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { ColorEvent } from '../../panel/color-panel.js';
 import type { LineWidthEvent } from '../../panel/line-width-panel.js';
 import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
 
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts
index ce4e05c5f98b3..c01bbdb572d08 100644
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts
@@ -8,13 +8,13 @@ import {
   EditPropsStore,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import { SignalWatcher } from '@blocksuite/global/utils';
 import { computed } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { ColorEvent } from '../../panel/color-panel.js';
 import type { LineWidthEvent } from '../../panel/line-width-panel.js';
 import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
 
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts
index 3d3a892634fa1..93d6df368e888 100644
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts
@@ -14,13 +14,13 @@ import {
   EditPropsStore,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import { computed, effect, type Signal, signal } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js';
-import type { ColorEvent } from '../../panel/color-panel.js';
 import { ShapeComponentConfig } from './shape-menu-config.js';
 
 export class EdgelessShapeMenu extends SignalWatcher(
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts
index cac9589dc8772..f18ede91886b6 100644
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts
@@ -1,11 +1,11 @@
 import { DefaultTheme } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import { computed } from '@preact/signals-core';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { ColorEvent } from '../../panel/color-panel.js';
 import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
 
 export class EdgelessTextMenu extends EdgelessToolbarToolMixin(LitElement) {
diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts
index ea7308f76e778..261ec8f3a55b8 100644
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts
@@ -1,4 +1,12 @@
 import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import type {
+  EdgelessColorPickerButton,
+  PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import {
+  packColor,
+  packColorsWithColorScheme,
+} from '@blocksuite/affine-components/color-picker';
 import type {
   BrushElementModel,
   BrushProps,
@@ -9,18 +17,12 @@ import {
   LineWidth,
   resolveColor,
 } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 
-import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js';
-import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js';
-import {
-  packColor,
-  packColorsWithColorScheme,
-} from '../../edgeless/components/color-picker/utils.js';
-import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import type { LineWidthEvent } from '../../edgeless/components/panel/line-width-panel.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 
diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
index 1e580f9021c22..ea9c4a138f33a 100644
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
@@ -1,4 +1,12 @@
 import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import type {
+  EdgelessColorPickerButton,
+  PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import {
+  packColor,
+  packColorsWithColorScheme,
+} from '@blocksuite/affine-components/color-picker';
 import {
   AddTextIcon,
   ConnectorCWithArrowIcon,
@@ -34,6 +42,7 @@ import {
   resolveColor,
   StrokeStyle,
 } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -43,13 +52,6 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 
-import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js';
-import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js';
-import {
-  packColor,
-  packColorsWithColorScheme,
-} from '../../edgeless/components/color-picker/utils.js';
-import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import {
   type LineStyleEvent,
   LineStylesPanel,
diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts
index e8560f0dd78e0..ac846721d9eb8 100644
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts
@@ -1,4 +1,12 @@
 import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import type {
+  EdgelessColorPickerButton,
+  PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import {
+  packColor,
+  packColorsWithColorScheme,
+} from '@blocksuite/affine-components/color-picker';
 import {
   NoteIcon,
   RenameIcon,
@@ -14,6 +22,7 @@ import {
   NoteDisplayMode,
   resolveColor,
 } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { matchFlavours } from '@blocksuite/affine-shared/utils';
 import { GfxExtensionIdentifier } from '@blocksuite/block-std/gfx';
 import {
@@ -28,13 +37,6 @@ import { property, query } from 'lit/decorators.js';
 import { join } from 'lit/directives/join.js';
 import { when } from 'lit/directives/when.js';
 
-import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js';
-import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js';
-import {
-  packColor,
-  packColorsWithColorScheme,
-} from '../../edgeless/components/color-picker/utils.js';
-import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 import type { EdgelessFrameManager } from '../../edgeless/frame-manager.js';
 import { mountFrameTitleEditor } from '../../edgeless/utils/text.js';
diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts
index 9a2b77aed692a..5a9468e0c354f 100644
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts
@@ -1,4 +1,12 @@
 import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import type {
+  EdgelessColorPickerButton,
+  PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import {
+  packColor,
+  packColorsWithColorScheme,
+} from '@blocksuite/affine-components/color-picker';
 import {
   ExpandIcon,
   LineStyleIcon,
@@ -35,14 +43,6 @@ import { join } from 'lit/directives/join.js';
 import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
 
-import type {
-  EdgelessColorPickerButton,
-  PickColorEvent,
-} from '../../edgeless/components/color-picker/index.js';
-import {
-  packColor,
-  packColorsWithColorScheme,
-} from '../../edgeless/components/color-picker/utils.js';
 import {
   type LineStyleEvent,
   LineStylesPanel,
diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts
index 129e5ea5fe596..bd3e2b6ad4c6f 100644
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts
@@ -1,4 +1,12 @@
 import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import type {
+  EdgelessColorPickerButton,
+  PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import {
+  packColor,
+  packColorsWithColorScheme,
+} from '@blocksuite/affine-components/color-picker';
 import {
   AddTextIcon,
   ChangeShapeIcon,
@@ -26,6 +34,7 @@ import {
   ShapeStyle,
   StrokeStyle,
 } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -36,13 +45,6 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 import isEqual from 'lodash.isequal';
 
-import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js';
-import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js';
-import {
-  packColor,
-  packColorsWithColorScheme,
-} from '../../edgeless/components/color-picker/utils.js';
-import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import {
   type LineStyleEvent,
   LineStylesPanel,
diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
index ff8e2de202e16..d78a9ccffa3e0 100644
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
@@ -4,6 +4,14 @@ import {
   normalizeShapeBound,
   TextUtils,
 } from '@blocksuite/affine-block-surface';
+import type {
+  EdgelessColorPickerButton,
+  PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import {
+  packColor,
+  packColorsWithColorScheme,
+} from '@blocksuite/affine-components/color-picker';
 import {
   SmallArrowDownIcon,
   TextAlignCenterIcon,
@@ -25,6 +33,7 @@ import {
   TextElementModel,
   type TextStyleProps,
 } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import {
   Bound,
   countBy,
@@ -37,15 +46,6 @@ import { choose } from 'lit/directives/choose.js';
 import { join } from 'lit/directives/join.js';
 import { when } from 'lit/directives/when.js';
 
-import type {
-  EdgelessColorPickerButton,
-  PickColorEvent,
-} from '../../edgeless/components/color-picker/index.js';
-import {
-  packColor,
-  packColorsWithColorScheme,
-} from '../../edgeless/components/color-picker/utils.js';
-import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 
 const FONT_SIZE_LIST = [
diff --git a/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts b/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts
index 7e4f587090fa2..cbb5abe474e6a 100644
--- a/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts
+++ b/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts
@@ -1,3 +1,4 @@
+import { parseStringToRgba } from '@blocksuite/affine-components/color-picker';
 import {
   ColorScheme,
   FrameBlockModel,
@@ -22,7 +23,6 @@ import { themeToVar } from '@toeverything/theme/v2';
 import { LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 
-import { parseStringToRgba } from '../../edgeless/components/color-picker/utils.js';
 import type { EdgelessRootService } from '../../edgeless/index.js';
 import { frameTitleStyle, frameTitleStyleVars } from './styles.js';
 
diff --git a/blocksuite/tests-legacy/edgeless/color-picker.spec.ts b/blocksuite/tests-legacy/edgeless/color-picker.spec.ts
index 6f9f2a53fc8f1..ed7676b2f3c32 100644
--- a/blocksuite/tests-legacy/edgeless/color-picker.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/color-picker.spec.ts
@@ -1,4 +1,4 @@
-import { parseStringToRgba } from '@blocks/root-block/edgeless/components/color-picker/utils.js';
+import { parseStringToRgba } from '@blocksuite/affine-components/color-picker';
 import { expect, type Locator, type Page } from '@playwright/test';
 import { dragBetweenCoords } from 'utils/actions/drag.js';
 import {
diff --git a/blocksuite/tests-legacy/package.json b/blocksuite/tests-legacy/package.json
index 4e5497f44d313..d282b92f31ccc 100644
--- a/blocksuite/tests-legacy/package.json
+++ b/blocksuite/tests-legacy/package.json
@@ -7,6 +7,7 @@
     "test": "yarn playwright test"
   },
   "dependencies": {
+    "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index fda973a2394d6..7ae3874b72d72 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -415,6 +415,7 @@ export const PackageList = [
     location: 'blocksuite/tests-legacy',
     name: '@blocksuite/legacy-e2e',
     workspaceDependencies: [
+      'blocksuite/affine/components',
       'blocksuite/affine/model',
       'blocksuite/framework/block-std',
       'blocksuite/framework/global',
diff --git a/yarn.lock b/yarn.lock
index 06613da38ffce..4a7684e9a9715 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3953,6 +3953,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@blocksuite/legacy-e2e@workspace:blocksuite/tests-legacy"
   dependencies:
+    "@blocksuite/affine-components": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/block-std": "workspace:*"
     "@blocksuite/global": "workspace:*"