Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Visual Tests
Catch unexpected visual changes & UI bugs in your stories
npm install @chromatic-com/storybook
Last updated 20 days ago
Downloads per week
Made by Storybook
Readme View on GitHub

Visual Tests Addon for Storybook

Run visual tests on your stories and compare changes with the latest baselines to catch UI regressions early in development. Supports multiple viewports, themes, and browsers.


Getting Started

Run the following command to install the addon and automatically configure it for your project via Storybook's CLI:

npx storybook add @chromatic-com/storybook

Start Storybook and navigate to the Visual Tests panel to run your first visual test with Chromatic!


By default, the addon offers zero-config support to run visual tests with Storybook and Chromatic. However, if you need, you can customize it by providing a few options. See the Chromatic documentation for more information on configuring and using it with your Storybook.

Getting Help

If you have any questions or need help with the addon, please get in touch with the Chromatic team. Sign in to your Chromatic account and click the chat icon in the bottom right corner of the screen to start a conversation with us.


We welcome contributions! If you're a maintainer, refer to the following instructions to set up your development environment with Chromatic.

Updating the GraphQL schema

The addon uses the Chromatic public GraphQL API. We rely on its schema to generate type definitions. The schema needs to be manually updated whenever it changes. To update, take and save it under src/gql/public-schema.graphql.


Running Storybook with the addon enabled throws an error

When installed, running Storybook may lead to the following error:

const stringWidth = require('string-width');

Error [ERR_REQUIRE_ESM]: require() of ES Module /my-project/node_modules/string-width/index.js is not supported.

This is a known issue when using an older version of the Yarn package manager (e.g., version 1.x). To solve this issue, you can upgrade to the latest stable version. However, if you cannot upgrade, adjust your package.json file and provide a resolution field to enable the Yarn package manager to install the correct dependencies. In doing so, you may be required to delete your node_modules directory and yarn.lock file before installing the dependencies again.

 "resolutions": {
    "jackspeak": "2.1.1"

Alternatively, you could use a different package manager (npm, pnpm).



Join the community
6,622 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI