diff --git a/.github/workflows/chromatic.yaml b/.github/workflows/chromatic.yaml
new file mode 100644
index 0000000..0d12f82
--- /dev/null
+++ b/.github/workflows/chromatic.yaml
@@ -0,0 +1,71 @@
+name: 🎨 Publish Storybook
+# Run this on every push to master and pull request to master or staging
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+      - staging
+permissions:
+  contents: read
+jobs:
+  publish:
+    # Skip this job if triggered by renovate bot
+    if: ${{ !startsWith(github.head_ref, 'renovate/')}}
+
+    # Use the latest version of Ubuntu
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
+    steps:
+      # Checkout repository
+      - name: 📥 Checkout code
+        uses: actions/checkout@v4
+
+      # Setup Node
+      - name: 📦 Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      # Install pnpm
+      - name: 📦 Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+          run_install: false
+
+      # Get pnpm store directory
+      - name: 📦 Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      # Setup pnpm cache
+      - name: 📦 Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      # Install dependencies
+      - name: 📦 Install dependencies
+        run: |
+          pnpm install --frozen-lockfile --prefer-frozen-lockfile
+
+      # Upload Storybook to Chromatic
+      - name: 🎨 Upload Storybook to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          buildScriptName: "storybook:build"
+          exitZeroOnChanges: true
+          exitOnceUploaded: true
+        env:
+          CI: true
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 4df3203..e3a6d09 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,4 +42,10 @@ testem.log
 Thumbs.db
 
 *storybook.log
-documentation.json
\ No newline at end of file
+documentation.json
+
+# Chromatic
+build-storybook.log
+chromatic.log
+chromatic-build-*.xml
+chromatic-diagnostics.json
\ No newline at end of file
diff --git a/package.json b/package.json
index 2156cba..4a9376d 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "start": "ng serve",
     "storybook": "ng run rainbow-palette:storybook",
     "storybook:build": "ng run rainbow-palette:build-storybook",
+    "chromatic": "chromatic --build-script-name storybook:build --exit-zero-on-changes",
     "test": "ng test",
     "test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadless",
     "watch": "ng build --watch --configuration development"
@@ -79,6 +80,7 @@
     "@typescript-eslint/eslint-plugin": "7.2.0",
     "@typescript-eslint/parser": "7.2.0",
     "autoprefixer": "^10.4.18",
+    "chromatic": "^11.2.0",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-tailwindcss": "^3.15.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b2b30f0..69f4c62 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -145,6 +145,9 @@ devDependencies:
   autoprefixer:
     specifier: ^10.4.18
     version: 10.4.18(postcss@8.4.37)
+  chromatic:
+    specifier: ^11.2.0
+    version: 11.2.0
   eslint:
     specifier: ^8.57.0
     version: 8.57.0