diff --git a/blocksuite/affine/blocks/block-root/src/effects.ts b/blocksuite/affine/blocks/block-root/src/effects.ts
index 36d7f36e78..8b7f6d9ba6 100644
--- a/blocksuite/affine/blocks/block-root/src/effects.ts
+++ b/blocksuite/affine/blocks/block-root/src/effects.ts
@@ -11,11 +11,6 @@ import {
 } from './edgeless/components/note-slicer/index.js';
 import { EdgelessAlignPanel } from './edgeless/components/panel/align-panel.js';
 import { CardStylePanel } from './edgeless/components/panel/card-style-panel.js';
-import {
-  EdgelessColorButton,
-  EdgelessColorPanel,
-  EdgelessTextColorIcon,
-} from './edgeless/components/panel/color-panel.js';
 import { EdgelessFontFamilyPanel } from './edgeless/components/panel/font-family-panel.js';
 import { EdgelessFontWeightAndStylePanel } from './edgeless/components/panel/font-weight-and-style-panel.js';
 import { EdgelessLineWidthPanel } from './edgeless/components/panel/line-width-panel.js';
@@ -230,7 +225,6 @@ function registerEdgelessToolbarComponents() {
 function registerEdgelessPanelComponents() {
   customElements.define('edgeless-align-panel', EdgelessAlignPanel);
   customElements.define('card-style-panel', CardStylePanel);
-  customElements.define('edgeless-color-panel', EdgelessColorPanel);
   customElements.define('edgeless-line-width-panel', EdgelessLineWidthPanel);
   customElements.define(
     'edgeless-font-weight-and-style-panel',
@@ -244,10 +238,6 @@ function registerEdgelessPanelComponents() {
   customElements.define('note-display-mode-panel', NoteDisplayModePanel);
   customElements.define('stroke-style-panel', StrokeStylePanel);
   customElements.define('edgeless-shape-style-panel', EdgelessShapeStylePanel);
-
-  // Color components
-  customElements.define('edgeless-color-button', EdgelessColorButton);
-  customElements.define('edgeless-text-color-icon', EdgelessTextColorIcon);
 }
 
 function registerEdgelessEditorComponents() {
@@ -333,9 +323,6 @@ declare global {
     'note-slicer': NoteSlicer;
     'edgeless-align-panel': EdgelessAlignPanel;
     'card-style-panel': CardStylePanel;
-    'edgeless-color-panel': EdgelessColorPanel;
-    'edgeless-color-button': EdgelessColorButton;
-    'edgeless-text-color-icon': EdgelessTextColorIcon;
     'edgeless-font-family-panel': EdgelessFontFamilyPanel;
     'edgeless-font-weight-and-style-panel': EdgelessFontWeightAndStylePanel;
     'edgeless-line-width-panel': EdgelessLineWidthPanel;
diff --git a/blocksuite/affine/components/src/color-picker/button.ts b/blocksuite/affine/components/src/color-picker/button.ts
index 5496a9f566..ca3d1dea89 100644
--- a/blocksuite/affine/components/src/color-picker/button.ts
+++ b/blocksuite/affine/components/src/color-picker/button.ts
@@ -202,9 +202,3 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
   @property()
   accessor tooltip: string | undefined = undefined;
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-color-picker-button': EdgelessColorPickerButton;
-  }
-}
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/panel/color-panel.ts b/blocksuite/affine/components/src/color-picker/color-panel.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/panel/color-panel.ts
rename to blocksuite/affine/components/src/color-picker/color-panel.ts
diff --git a/blocksuite/affine/components/src/color-picker/color-picker.ts b/blocksuite/affine/components/src/color-picker/color-picker.ts
index aad3992448..d9c251c499 100644
--- a/blocksuite/affine/components/src/color-picker/color-picker.ts
+++ b/blocksuite/affine/components/src/color-picker/color-picker.ts
@@ -671,9 +671,3 @@ export class EdgelessColorPicker extends SignalWatcher(
 
   accessor rgba$ = computed(() => hsvaToRgba(this.hsva$.value));
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-color-picker': EdgelessColorPicker;
-  }
-}
diff --git a/blocksuite/affine/components/src/color-picker/custom-button.ts b/blocksuite/affine/components/src/color-picker/custom-button.ts
index 41bd64373c..dd00d3c7cf 100644
--- a/blocksuite/affine/components/src/color-picker/custom-button.ts
+++ b/blocksuite/affine/components/src/color-picker/custom-button.ts
@@ -67,9 +67,3 @@ export class EdgelessColorCustomButton extends LitElement {
   @property({ attribute: true, type: Boolean })
   accessor active: boolean = false;
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-color-custom-button': EdgelessColorCustomButton;
-  }
-}
diff --git a/blocksuite/affine/components/src/color-picker/index.ts b/blocksuite/affine/components/src/color-picker/index.ts
index b22f3b4da5..b95d6f1dec 100644
--- a/blocksuite/affine/components/src/color-picker/index.ts
+++ b/blocksuite/affine/components/src/color-picker/index.ts
@@ -1,11 +1,17 @@
-import { EdgelessColorPickerButton } from './button.js';
-import { EdgelessColorPicker } from './color-picker.js';
-import { EdgelessColorCustomButton } from './custom-button.js';
+import { EdgelessColorPickerButton } from './button';
+import {
+  EdgelessColorButton,
+  EdgelessColorPanel,
+  EdgelessTextColorIcon,
+} from './color-panel';
+import { EdgelessColorPicker } from './color-picker';
+import { EdgelessColorCustomButton } from './custom-button';
 
-export * from './button.js';
-export * from './color-picker.js';
-export * from './types.js';
-export * from './utils.js';
+export * from './button';
+export * from './color-panel';
+export * from './color-picker';
+export * from './types';
+export * from './utils';
 
 export function effects() {
   customElements.define('edgeless-color-picker', EdgelessColorPicker);
@@ -17,4 +23,19 @@ export function effects() {
     'edgeless-color-custom-button',
     EdgelessColorCustomButton
   );
+  customElements.define('edgeless-color-button', EdgelessColorButton);
+  customElements.define('edgeless-color-panel', EdgelessColorPanel);
+  customElements.define('edgeless-text-color-icon', EdgelessTextColorIcon);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-color-picker-button': EdgelessColorPickerButton;
+    'edgeless-color-picker': EdgelessColorPicker;
+    'edgeless-color-custom-button': EdgelessColorCustomButton;
+
+    'edgeless-color-panel': EdgelessColorPanel;
+    'edgeless-color-button': EdgelessColorButton;
+    'edgeless-text-color-icon': EdgelessTextColorIcon;
+  }
 }