Storybook + Chromatic
Storybook and Chromatic are part of the component workflow for this site. Together, they make it easier to build UI in small, testable pieces and keep changes from drifting over time.
Storybook
Section titled “Storybook”Storybook is where components live while they’re being designed and built. It’s useful for:
- Developing components in isolation (without full page context)
- Capturing key states and variations (loading, error, disabled, etc.)
- Documenting usage and behavior as the system grows
Each component has a story file that represents real UI states, not just a “happy path.”
Learn more: Storybook
Chromatic
Section titled “Chromatic”Chromatic adds visual regression testing on top of Storybook. It automatically:
- Builds Storybook in CI
- Captures screenshots for each story
- Compares changes across commits and flags unexpected UI diffs
This helps catch layout shifts, styling regressions, and theme-related issues early, especially as the component library expands.
Learn more: Chromatic
Why this workflow matters
Section titled “Why this workflow matters”Component systems scale best when changes are easy to review and safe to ship. Storybook keeps the work modular, and Chromatic makes visual changes explicit so UI quality doesn’t rely on memory or manual checking.