Introduction to Chromatic
What is Chromatic?
Chromatic is a cloud-based toolchain for Storybook that helps teams ship UI components faster. It’s made by the team behind Storybook. Watch a quick demo video now or read on for the key features:
⬆️ Publish Storybook
Publish your Storybook to our secure CDN when you push code. Chromatic provides a shared workspace for teams to comment and review UI work together. It integrates with your existing CI workflow and Git hosting provider.
✅ UI Tests
Test for visual regressions in components. Chromatic turns your stories into test baselines. Each story is rendered in Chrome, Firefox, Safari, and Edge simultaneously, then compared to a screenshot of the “last known good state” to detect bugs.
💬 UI Review
Review a visual changeset of components affected by each pull request. Chromatic compares the new and updated components on a given feature branch versus a target branch to generate a UI changeset. That makes it easy to review with tech leads, designers, and product managers. Think of it like code review, but for UI.
📚 Document
Maintain a documented, versioned, and searchable library for your components. Chromatic helps teammates discover your work to reuse. Reference Chromatic’s library inside your local Storybook or on the website.
🚥 Powered by continuous integration
Automate your component library with CI and version control. Chromatic includes three PR checks: “Storybook Publish”, “UI Tests”, and “UI Review”. This helps you gauge UI work in progress.
Why use Storybook?
Storybook is an open source tool built for developing UI components in isolation and creating living, interactive component documentation. Storybook makes it trivial to reproduce hard to reach component states and ensuring those states are documented in code. When you adopt Storybook you also unlock automation for UI components and libraries via Chromatic.
New to Storybook? Read our peer-reviewed guides for professional developers at storybook.js.org/tutorials.
Next: Setup and publish
Setup Chromatic to publish your Storybook. It takes less than 2 minutes.