diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
new file mode 100644
index 0000000..172860a
--- /dev/null
+++ b/.github/workflows/chromatic.yml
@@ -0,0 +1,23 @@
+name: 'Chromatic'
+
+on: push
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
diff --git a/.gitignore b/.gitignore
index ceb6bd1..f46e1b1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -100,4 +100,4 @@ out/
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
\ No newline at end of file
+!.yarn/versions
diff --git a/package.json b/package.json
index 7d9fcc6..5a1e2a4 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "lint:types": "tsc --noEmit",
     "test": "vitest",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic"
   },
   "keywords": [],
   "author": {
@@ -55,6 +56,7 @@
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
+    "chromatic": "^11.0.0",
     "electron": "28.2.3",
     "electron-devtools-installer": "^3.2.0",
     "eslint": "^8.56.0",
diff --git a/yarn.lock b/yarn.lock
index 1e053c0..e8b41fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6353,6 +6353,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chromatic@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "chromatic@npm:11.0.0"
+  peerDependencies:
+    "@chromatic-com/cypress": ^0.5.2 || ^1.0.0
+    "@chromatic-com/playwright": ^0.5.2 || ^1.0.0
+  peerDependenciesMeta:
+    "@chromatic-com/cypress":
+      optional: true
+    "@chromatic-com/playwright":
+      optional: true
+  bin:
+    chroma: dist/bin.js
+    chromatic: dist/bin.js
+    chromatic-cli: dist/bin.js
+  checksum: 10c0/edd92b3fb370c8d358cd587392686e83af34aec0e5d6592bfc637d6b6c1f670f3910ff572182192dcf1adf8e34384f785597dcdcb89196482f0c6fa55547d1bf
+  languageName: node
+  linkType: hard
+
 "chrome-trace-event@npm:^1.0.3":
   version: 1.0.3
   resolution: "chrome-trace-event@npm:1.0.3"
@@ -14191,6 +14210,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^7.0.2"
     "@typescript-eslint/parser": "npm:^7.0.2"
     antd: "npm:^5.14.1"
+    chromatic: "npm:^11.0.0"
     electron: "npm:28.2.3"
     electron-devtools-installer: "npm:^3.2.0"
     electron-squirrel-startup: "npm:^1.0.0"