Chromatic

Captures pixel-perfect snapshots of Storybook components across Chrome, Firefox, Safari, and Edge browsers, then performs automated visual diff analysis to detect UI changes between builds. Uses the SteadySnap algorithm to freeze animations, stabilize rendering, and perform burst capture to eliminate test flake from dynamic content, enabling reliable visual regression detection without manual threshold tuning.

Scans rendered components for WCAG 2.1 accessibility violations (contrast, ARIA, semantic HTML, keyboard navigation) and generates detailed violation reports with remediation guidance. Runs automatically on every snapshot capture and surfaces violations in the UI Review dashboard with severity levels and affected components.

Provides a Model Context Protocol (MCP) server that exposes Storybook component metadata (stories, props, examples, accessibility info) to AI agents and LLMs. Enables AI tools to understand component APIs and usage patterns, facilitating AI-assisted code generation and component discovery workflows.

Embeds Chromatic Storybook links directly in Figma designs via a Figma plugin, enabling designers to navigate from design files to implemented components. Creates a bidirectional link between design and code, allowing teams to verify that implemented components match design specifications.

Manages snapshot consumption across monthly billing cycles with tiered quotas (free: 5K, Starter: 35K, Pro: 85K snapshots/month) and overage pricing ($0.008 per snapshot). Provides usage dashboards and alerts to help teams monitor consumption and optimize testing strategies to stay within budget.

Extracts component metadata (props, types, documentation) from component source code and Storybook stories, making it searchable and browsable in the Chromatic UI. Supports TypeScript prop types, JSDoc comments, and Storybook argTypes. Enables teams to discover components by searching for prop names, types, or documentation keywords. Planned integration with Storybook MCP (Model Context Protocol) for AI agent access to component APIs (Q1 2026).

Provides real-time snapshot consumption tracking and cost estimation based on the snapshot pricing model ($0.008 per snapshot overage). Displays projected monthly costs based on current usage trends. Allows teams to set snapshot budgets and receive alerts when approaching quota limits. Provides visibility into snapshot consumption by component, branch, and test run.

Executes Playwright and Cypress interaction tests defined in Storybook stories (play functions) and captures test results (pass/fail/error) alongside visual snapshots. Integrates test execution into the build pipeline so interaction test failures block merges and are visible in PR checks, providing a unified view of visual + interaction test health.

Analyzes Git history and file changes to identify which components have been modified since the last build, then executes snapshots only for changed components and their dependents. Reduces snapshot consumption by ~80% by skipping unchanged components, enabling cost-efficient testing of large component libraries without sacrificing coverage.

Provides a web-based UI Review dashboard where team members can view side-by-side visual diffs, approve/reject changes, and leave inline comments on specific components. Integrates with Git to block merges until review is complete, and sends notifications to Slack or email when reviews are requested or changes are made.

Hosts versioned Storybook instances with automatic updates on every Git push, providing a searchable component library with API documentation, usage examples, and component metadata. Enables teams to publish and discover components across projects, with optional custom domain support and Figma plugin integration to link stories to design files.

Executes snapshots in parallel across multiple browser/viewport combinations without requiring manual configuration or resource provisioning. Automatically scales parallelization based on snapshot count and available infrastructure, with no per-parallel-run pricing — all tiers include unlimited parallel execution.

Integrates directly with Git platforms (GitHub, GitLab, Bitbucket) and CI/CD systems to automatically trigger snapshot captures on every code push, report results as PR checks, and block merges until visual review is complete. Supports custom Git integrations via webhooks for non-standard Git platforms.

Captures component snapshots across 4 major browsers (Chrome, Firefox, Safari, Edge) and configurable viewport widths/heights in a single build. Enables cross-browser visual regression detection and responsive design validation without requiring separate test runs per browser.

Sends build notifications to Slack channels or custom webhooks when snapshots complete, including build status, snapshot count, and link to UI Review dashboard. Enables teams to monitor visual test results without logging into Chromatic, with customizable notification frequency and channels.