Chromatic Answers:
"Did the visual appearance of my Storybook components change?"
- • Screenshot-based comparison
- • Requires Storybook stories
- • Great for catching visual regressions
Buoy Answers:
"Is my codebase following the design system?"
- • Code analysis
- • Works on any codebase
- • Great for catching design drift
Feature Comparison
Feature
Chromatic
Buoy
What it detects
Visual changes in Storybook
Structural drift in code
Scope
Components with stories
Entire codebase
Detection method
Screenshot comparison
Code analysis
Hardcoded values
Not detected
Detected + suggestions
Duplicate components
Not detected
Semantic detection
Token coverage
Not tracked
Full metrics
Requires Storybook
Yes
No (optional integration)
Free tier
5,000 snapshots/mo
Unlimited (CLI)
What Chromatic Misses
Components Without Stories
If a component doesn't have a Storybook story, Chromatic can't see it. Buoy scans your entire codebase, stories or not.
Hardcoded Values That Look Right
#3b82f6 and var(--primary) might render identically.
Chromatic sees them as the same. Buoy knows one is a problem.
Duplicate Implementations
Button and ButtonNew might look identical in screenshots. Buoy identifies them as duplicates that should be consolidated.
Better Together
Chromatic and Buoy solve different problems. Use Chromatic to catch visual regressions. Use Buoy to ensure structural consistency with your design system.
📸
Chromatic
Visual regression
+
âš“
Buoy
Structural drift
=
✨
Complete coverage