diff --git a/packages/editor-ui-color-picker/color-picker.tsx b/packages/editor-ui-color-picker/color-picker.tsx
new file mode 100644
index 0000000..763d6b9
--- /dev/null
+++ b/packages/editor-ui-color-picker/color-picker.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { RgbaColorPicker } from "react-colorful";
+
+export function ColorPicker(
+  props: React.ComponentProps<typeof RgbaColorPicker>
+) {
+  return <RgbaColorPicker {...props} />;
+}
diff --git a/packages/editor-ui-color-picker/index.ts b/packages/editor-ui-color-picker/index.ts
new file mode 100644
index 0000000..6bad1d6
--- /dev/null
+++ b/packages/editor-ui-color-picker/index.ts
@@ -0,0 +1 @@
+export * from "./color-picker";
diff --git a/packages/editor-ui-color-picker/package.json b/packages/editor-ui-color-picker/package.json
index ff75ece..891d86b 100644
--- a/packages/editor-ui-color-picker/package.json
+++ b/packages/editor-ui-color-picker/package.json
@@ -2,6 +2,7 @@
     "name": "@editor-ui/color-picker",
     "version": "0.0.0",
     "dependencies": {
-        "@editor-ui/foundation": "0.0.0"
+        "@editor-ui/foundation": "0.0.0",
+        "react-colorful": "^5.6.1"
     }
 }
\ No newline at end of file