How to Publish Storybook to Chromatic in GitHub Actions

Chromatic turns Storybook into a visual diff on every PR, but it needs full git history to compute the baseline.

Check out with fetch-depth: 0, install dependencies, then run the chromaui/action with your project token to publish and diff.

Steps

• Store the Chromatic project token as CHROMATIC_PROJECT_TOKEN.
• Check out with fetch-depth: 0 so Chromatic can diff against the baseline.
• Install dependencies.
• Run the chromaui/action.

Workflow

name: Chromatic
on: [push]
jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

Notes

• Without fetch-depth: 0 Chromatic cannot find the baseline commit and re-snapshots everything.
• Use exitZeroOnChanges: true if you do not want visual changes to fail the build.

Related guides