diff --git a/.storybook/main.ts b/.storybook/main.ts
index 249850f2..8bd70860 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -25,6 +25,7 @@ const config: StorybookConfig = {
       },
     },
     '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
     '@storybook/experimental-addon-test',
   ],
 };
diff --git a/chromatic.config.json b/chromatic.config.json
new file mode 100644
index 00000000..55999326
--- /dev/null
+++ b/chromatic.config.json
@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:6042cb92fd1bb200234586ee",
+  "zip": true
+}
diff --git a/package.json b/package.json
index c2368215..fce37319 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
   },
   "devDependencies": {
     "@auto-it/released": "^11.1.6",
+    "@chromatic-com/storybook": "^3.2.3",
     "@storybook/addon-actions": "8.5.0-beta.11",
     "@storybook/addon-essentials": "8.5.0-beta.11",
     "@storybook/eslint-config-storybook": "^4.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2710a2ad..1df2a974 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       '@auto-it/released':
         specifier: ^11.1.6
         version: 11.1.6(@types/node@20.14.9)(typescript@5.5.2)
+      '@chromatic-com/storybook':
+        specifier: ^3.2.3
+        version: 3.2.3(react@18.3.1)(storybook@8.5.0-beta.11(prettier@3.3.2))
       '@storybook/addon-actions':
         specifier: 8.5.0-beta.11
         version: 8.5.0-beta.11(storybook@8.5.0-beta.11(prettier@3.3.2))
@@ -383,6 +386,12 @@ packages:
   '@bundled-es-modules/tough-cookie@0.1.6':
     resolution: {integrity: sha512-dvMHbL464C0zI+Yqxbz6kZ5TOEp7GLW+pry/RWndAR8MJQAXZ2rPmIs8tziTZjeIyhSNZgZbCePtfSbdWqStJw==}
 
+  '@chromatic-com/storybook@3.2.3':
+    resolution: {integrity: sha512-3+hfANx79kIjP1qrOSLxpoAXOiYUA0S7A0WI0A24kASrv7USFNNW8etR5TjUilMb0LmqKUn3wDwUK2h6aceQ9g==}
+    engines: {node: '>=16.0.0', yarn: '>=1.22.18'}
+    peerDependencies:
+      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+
   '@cspotcode/source-map-support@0.8.1':
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
@@ -2494,6 +2503,10 @@ packages:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
 
+  filesize@10.1.6:
+    resolution: {integrity: sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==}
+    engines: {node: '>= 10.4.0'}
+
   fill-range@7.0.1:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}
@@ -4043,6 +4056,12 @@ packages:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
+  react-confetti@6.2.2:
+    resolution: {integrity: sha512-K+kTyOPgX+ZujMZ+Rmb7pZdHBvg+DzinG/w4Eh52WOB8/pfO38efnnrtEZNJmjTvLxc16RBYO+tPM68Fg8viBA==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: ^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
+
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
@@ -4782,6 +4801,9 @@ packages:
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
 
+  tween-functions@1.2.0:
+    resolution: {integrity: sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -5832,6 +5854,19 @@ snapshots:
       '@types/tough-cookie': 4.0.5
       tough-cookie: 4.1.4
 
+  '@chromatic-com/storybook@3.2.3(react@18.3.1)(storybook@8.5.0-beta.11(prettier@3.3.2))':
+    dependencies:
+      chromatic: 11.16.1
+      filesize: 10.1.6
+      jsonfile: 6.1.0
+      react-confetti: 6.2.2(react@18.3.1)
+      storybook: 8.5.0-beta.11(prettier@3.3.2)
+      strip-ansi: 7.1.0
+    transitivePeerDependencies:
+      - '@chromatic-com/cypress'
+      - '@chromatic-com/playwright'
+      - react
+
   '@cspotcode/source-map-support@0.8.1':
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
@@ -8460,6 +8495,8 @@ snapshots:
     dependencies:
       flat-cache: 3.2.0
 
+  filesize@10.1.6: {}
+
   fill-range@7.0.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -10265,6 +10302,11 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
+  react-confetti@6.2.2(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      tween-functions: 1.2.0
+
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
@@ -11260,6 +11302,8 @@ snapshots:
       tslib: 1.14.1
       typescript: 5.5.2
 
+  tween-functions@1.2.0: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1