diff --git a/package.json b/package.json
index d3043743..38770761 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "@types/node-fetch": "^2.6.6",
     "auto": "^10.3.0",
     "babel-jest": "^27.0.6",
+    "chromatic": "^10.6.0",
     "concurrently": "^7.0.0",
     "cypress": "^13.6.1",
     "eslint": "^7.32.0",
diff --git a/yarn.lock b/yarn.lock
index 43c580c8..8e998e84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4080,6 +4080,7 @@ __metadata:
     "@types/node-fetch": "npm:^2.6.6"
     auto: "npm:^10.3.0"
     babel-jest: "npm:^27.0.6"
+    chromatic: "npm:^10.6.0"
     concurrently: "npm:^7.0.0"
     cypress: "npm:^13.6.1"
     eslint: "npm:^7.32.0"
@@ -9725,6 +9726,25 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"chromatic@npm:^10.6.0":
+  version: 10.6.0
+  resolution: "chromatic@npm:10.6.0"
+  peerDependencies:
+    chromatic-cypress: ^0.4.0 || ^1.0.0
+    chromatic-playwright: ^0.4.0 || ^1.0.0
+  peerDependenciesMeta:
+    chromatic-cypress:
+      optional: true
+    chromatic-playwright:
+      optional: true
+  bin:
+    chroma: dist/bin.js
+    chromatic: dist/bin.js
+    chromatic-cli: dist/bin.js
+  checksum: 454f2ab6a801db98fb4ae82113788ad484fc98a4151f03d817f63940b7f649eb9a7d4a4ec8e3d90a8dc9f1b1241fd4628e84f475d9c32f7638d367f0c5d434e6
+  languageName: node
+  linkType: hard
+
 "chrome-remote-interface@npm:^0.33.0":
   version: 0.33.0
   resolution: "chrome-remote-interface@npm:0.33.0"