Chromatic

Visual regression diff on Storybook snapshots — 5K snapshots/mo free

Chromatic

Role

Visual regression for every component story in the family’s Storybook. On every PR, Chromatic uploads the built Storybook, captures one snapshot per story per supported viewport, and diffs each frame against the baseline branch. The PR shows a “Visual changes” check that requires explicit acceptance of any pixel-level diff.

Chromatic is the only layer of the three-layer testing stack that catches “this CSS change broke an unrelated component” — a class of regression no functional test reaches.

Free tier

• 5,000 snapshots / month — well above the family’s 11+ sites + 5 oriz-ui packages at current story counts
• Unlimited components, unlimited collaborators
• TurboSnap (only re-snapshot stories whose dependencies changed) on the free tier — reduces snapshot burn
• No card required at sign-up

Card / subscription required?

NO. Free-tier sign-up is GitHub-OAuth-only. No payment method requested.

How CI consumes it

- name: Build Storybook
  run: pnpm storybook build --output-dir storybook-static
- name: Visual regression (Chromatic)
  uses: chromaui/action@v11
  with:
    projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
    storybookBuildDir: storybook-static
    onlyChanged: true       # TurboSnap
    exitZeroOnChanges: false # PR fails on undeclared diff

CHROMATIC_PROJECT_TOKEN lives in Doppler. The check posts back to the PR with a link to accept / reject each diff in Chromatic’s UI.

Snapshot budget

At ~50 stories per package × 1 viewport × 17 PRs/month avg, the family burns roughly 850 snapshots/mo without TurboSnap; with TurboSnap on, typically <300/mo. The 5K cap is a 5-10x buffer — well within the never-hit-quotas posture.

Alternatives

• Percy (BrowserStack) — paid past 5K screenshots/mo with a card-on-file requirement.
• Lost Pixel — OSS, self-hostable, requires CI plumbing for the baseline storage; documented as an escape-hatch swap.
• Argos CI — comparable free tier, smaller community.

Swap cost

Medium — Storybook stays the same; only the Chromatic-specific GitHub Action + project token are removed. Lost Pixel is the documented self-hosted swap target if the 5K/mo cap ever tightens.

Why this is our pick

Tightest Storybook integration, free 5K snapshots/mo (well above family scale), TurboSnap halves snapshot burn for free, no card. Pairs with Storybook + Vitest + Playwright as the family’s three-layer testing stack.

Cross-refs

• testing services index
• Storybook — snapshot source
• Vitest — unit sibling
• Playwright — E2E sibling
• Testing three-layer decision
• Doppler — secrets source-of-truth
• Never hit quotas rule
• No card-on-file rule

Edit on GitHub · Back to index