Back to all FAQs

How to skip Chromatic runs for draft PRs?

Chromatic provides flags like --skip to bypass builds and --skip-update-check to bypass checks that might block your pipeline, but it lacks a built-in feature to automatically skip commits based on status. You can prevent Chromatic from running on draft pull requests by adding a conditional check to your CI workflow.

Here’s an example of how you might achieve that:

name: 'Chromatic'

# Event for the workflow
on:
  push:
    branches:
      - main
  pull_request:

# List of jobs
jobs:
  chromatic-deployment:
    # Operating System
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - uses: actions/checkout@v4
        with:
	  # 👇 Makes sure Chromatic can review the full git history
          fetch-depth: 0
          # 👇 Tells the checkout which commit hash to reference
          ref: ${{ github.event.pull_request.head.ref }}
      - uses: actions/setup-node@v4
        with:
          node-version: 23.3.0
      # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
      - name: Install dependencies
        run: npm ci

      # If you're building your SB in a separate step, you can include it below;
      # make sure to include --webpack-stats in build-storybook script:
      - name: Build Storybook
        run: npm run build-storybook

      # 👇 Adds Chromatic as a step in the workflow
      - name: Publish to Chromatic
        uses: chromaui/action@latest
        with:
          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          # 👇 Enable TurboSnap:
          onlyChanged: true
          # 👇 Add debug: true and print dependency trace for changed files to help with debugging:
          traceChanged: 'expanded'
	  debug: true
          exitZeroOnChanges: true # Alternatively, can use exitOnceUploaded
          autoAcceptChanges: 'main'
	  # If you're letting Chromatic build your SB, you can skip storybookBuildDir.
          # 👇 Since we're building in a separate step, this tells us where the build is:
          storybookBuildDir: ./storybook-static
          # 👇 This makes sure Chromatic skips PR drafts (still in progress or not ready to review)
          skip: ${{ github.event.pull_request.draft == true }}