How to use Chromatic
Chromatic automates UI development so you can build more features, faster, and with less manual work. Here’s the recommended workflow that takes full advantage of everything we have to offer.
1. Build in Storybook
Build UI components in isolation with Storybook. Use Component-Driven Development, a process for building UIs from the “bottom up” starting with components and ending with screens.
2. Publish on Chromatic
Publish Storybook to Chromatic’s secure workspace (CDN) that’s accessible to your entire team. That keeps everyone in sync with the latest UI implementation. No fussing with dependencies,
git, or local dev environments.
3. UI Test to catch bugs
Once Storybook is published in the cloud, Chromatic’s cloud infrastructure automates UI tests to catch regressions. Developers find and fix UI bugs during development. When the tests pass, the UI is considered “ready” and moves on to review.
4. UI Review to get team sign off
Now that the UI has no obvious flaws, bring in designers, PMs, and other stakeholders to confirm that the UI meets specifications. Developers often fill in edge cases and overcome technical hurdles while coding. Review is the opportunity to sync those in-development updates with teammates to get a final sign off.
5. Document to reuse later
When the UI is production-ready, document it so future developers don’t have to rebuild the same thing. This is automatic with Chromatic. Every component is documented, versioned, and searchable in the cloud.
🚀 Merge with confidence
You’re ready to merge! When you build components in Storybook you also unlock Chromatic’s automated cloud services for testing, review, and documentation.
You finished setting up Chromatic. We look forward to the incredible UIs you’ll build.
Our most popular guides and articles
- Intro to Storybook is the essential guide to learning Storybook.
- Design Systems for Developers shares how to build production infrastructure for design systems.
- Visual Testing Handbook details how professional frontend teams visual test with Storybook.
- Component-Driven Development is a “bottoms up” process for building modular UIs starting from components and ending with screens.
- UI Component Playbook is a 5-step overview of designing and engineering frontends with components