export const MyStory: Story = { parameters: { chromatic: { // Only test specific viewports viewports: [768, 1024], // Use stricter diff threshold diffThreshold: 0.1, // Disable for this story disable: false, // Pause animations pauseAnimationAtEnd: true, }, },};
Ignoring Dynamic Content
For components with dynamic content (timestamps, random IDs, etc.):
export const MyStory: Story = { parameters: { chromatic: { ignore: { // Ignore by CSS selector selector: '.timestamp', // Or by pixel coordinates x: 0, y: 0, width: 100, height: 100, }, }, },};
Diff Thresholds
The diff threshold determines how sensitive Chromatic is to visual changes. Lower values
mean more strict comparison:
0.0 - 0.1: Very strict (catches minor changes)
0.1 - 0.2: Standard (default: 0.2)
0.2 - 0.5: Relaxed (catches major changes only)
Best Practices
Review all changes: Always review visual diffs before approving
Use appropriate thresholds: Adjust thresholds per story if needed
Ignore dynamic content: Use ignore regions for timestamps, IDs, etc.
Test all themes: Ensure components work in both light and dark modes
Test all viewports: Verify responsive behavior across screen sizes