# Chromatic docs

> Chromatic is a cloud-based toolchain for visual testing, reviewing, and documenting Storybook components.

## Overview
- [Why Chromatic?](https://chromatic.com/docs/llms/introduction.txt): Chromatic is a cloud-based toolchain that integrates with Storybook, Playwright, and Cypress to help teams test and review UIs.
- [Quickstart](https://chromatic.com/docs/llms/quickstart.txt): Learn how to setup Chromatic for Storybook and run tests

## Visual Tests
- [Diff Inspector](https://chromatic.com/docs/llms/diff-inspector.txt): Learn how to analyze visual changes with Chromatic's Diff Inspector
- [Visual Tests addon for Storybook](https://chromatic.com/docs/llms/visual-tests-addon.txt): Configure Storybook to test UIs with the Visual Tests Addon
- [Visual tests](https://chromatic.com/docs/llms/visual.txt): Chromatic is a cloud-based toolchain that integrates with Storybook, Playwright, and Cypress to help teams test and review UI components.
- [Story Modes](https://chromatic.com/docs/llms/modes.txt): Configure Chromatic to test themes, viewports, locales and more simultaneously
- [Viewports](https://chromatic.com/docs/llms/modes/viewports.txt): Configure Chromatic in Storybook to test responsive components at various viewports and breakpoints.
- [Viewports (legacy)](https://chromatic.com/docs/llms/legacy-viewports.txt): chromatic.viewports feature is now being replaced by the new Modes API
- [Themes](https://chromatic.com/docs/llms/themes.txt): Configure Chromatic to test components with different themes
- [Configure browser options in Modes](https://chromatic.com/docs/llms/modes/browser-options.txt): Learn how to configure browser options such as colorScheme and locale in Modes
- [Custom decorators and globals](https://chromatic.com/docs/llms/custom-decorators.txt): Wire up custom decorators with modes to test different variants of a component
- [Diagnose preview rebuilds](https://chromatic.com/docs/llms/turbosnap/preview-rebuilds.txt): Unexpected changes in your preview file can result in more rebuilds than anticipated. Learn how to use the `trace` utility to identify the root cause of these preview rebuilds.
- [Setup TurboSnap](https://chromatic.com/docs/llms/turbosnap/setup.txt): Speed up tests by detecting file changes with Git
- [Mastering Chromatic's trace utility](https://chromatic.com/docs/llms/turbosnap/trace-utility.txt): Learn how to use the trace utility to analyze your dependency graph. Identify and remove unnecessary imports, diagnose false positives from build tools, and understand the real propagation of changes for optimized bundles and confident refactoring.
- [Troubleshooting TurboSnap](https://chromatic.com/docs/llms/turbosnap/troubleshooting.txt): Speed up tests by detecting file changes with Git
- [TurboSnap dependency tracing](https://chromatic.com/docs/llms/turbosnap/dependency-tracing.txt): Speed up tests by detecting file changes with Git
- [Introduction to TurboSnap](https://chromatic.com/docs/llms/turbosnap.txt): Speed up tests by detecting file changes with Git
- [Optimizing TurboSnap for monorepos](https://chromatic.com/docs/llms/turbosnap/monorepo-usage.txt): Tips to optimize your TurboSnap configuration when working with a monorepo
- [TurboSnap best practices](https://chromatic.com/docs/llms/turbosnap/best-practices.txt): TurboSnap best practices to optimize your builds for faster testing

## Accessibility Tests
- [Configure](https://chromatic.com/docs/llms/accessibility/configure.txt): Learn about the various configuration options for accessibility tests
- [Dashboard](https://chromatic.com/docs/llms/accessibility/dashboard.txt): Monitor accessibility compliance across your application with Chromatic's dashboard
- [Usage](https://chromatic.com/docs/llms/accessibility/usage.txt): Learn how to setup and run accessibility issues using Storybook and Chromatic
- [Accessibility Tests](https://chromatic.com/docs/llms/accessibility.txt): Catch accessibility issues early with automated testing for your components

## Interaction Tests
- [Interaction tests](https://chromatic.com/docs/llms/interactions.txt): Learn how interaction testing works with Chromatic
- [Testing Shadow DOM](https://chromatic.com/docs/llms/interactions/shadow-dom.txt): Learn how write interaction tests for components that use Shadow DOM

## CI
- [Automate Chromatic with Azure](https://chromatic.com/docs/llms/azure-pipelines.txt): Learn how to configure Chromatic with Azure
- [Automate Chromatic with BitBucket](https://chromatic.com/docs/llms/bitbucket-pipelines.txt): Learn how to configure Chromatic with BitBucket Pipelines
- [Automate with CI](https://chromatic.com/docs/llms/ci.txt): Learn how to configure Chromatic with your continuous integration service
- [Automate Chromatic with CircleCI](https://chromatic.com/docs/llms/circleci.txt): Learn how to configure Chromatic with CircleCI
- [Automate Chromatic with your custom CI provider](https://chromatic.com/docs/llms/custom-ci-provider.txt): Learn how to configure Chromatic with a custom provider
- [Automate Chromatic with GitHub Actions](https://chromatic.com/docs/llms/github-actions.txt): Learn how to configure Chromatic with GitHub Actions
- [Automate Chromatic with GitLab](https://chromatic.com/docs/llms/gitlab.txt): Learn how to configure Chromatic with GitLab
- [Automate Chromatic with Jenkins](https://chromatic.com/docs/llms/jenkins.txt): Learn how to configure Chromatic with Jenkins
- [Automate Chromatic with Semaphore](https://chromatic.com/docs/llms/semaphore.txt): Learn how to configure Chromatic with Semaphore
- [Automate Chromatic with Travis CI](https://chromatic.com/docs/llms/travisci.txt): Learn how to configure Chromatic with Travis CI

## Configuration
- [CLI](https://chromatic.com/docs/llms/cli.txt): Learn about the Chromatic CLI options
- [Configuration reference](https://chromatic.com/docs/llms/configure.txt): Learn about the various configuration options for Chromatic
- [Browsers](https://chromatic.com/docs/llms/browsers.txt): Enable visual testing with multiple browsers
- [Parameters & Globals](https://chromatic.com/docs/llms/params.txt): Use with globals and params to control snapshot capturing behavior
- [Slack](https://chromatic.com/docs/llms/slack.txt): Connect Chromatic to Slack
- [Custom webhooks](https://chromatic.com/docs/llms/custom-webhooks.txt): Connect Chromatic to other services with webhooks
- [Monorepos](https://chromatic.com/docs/llms/monorepos.txt): Chromatic's support for monorepos
- [isChromatic](https://chromatic.com/docs/llms/ischromatic.txt): Learn how to control what executes in the Chromatic environment

## Snapshot
- [Animations](https://chromatic.com/docs/llms/animations.txt): Learn how Chromatic pauses animations and how to control the behavior
- [Delay](https://chromatic.com/docs/llms/delay.txt): Learn how to make Chromatic wait before capturing a snapshot
- [Disable snapshots](https://chromatic.com/docs/llms/disable-snapshots.txt): Learn how you can tell Chromatic to skip snapshots for certain tests
- [Hover and focus states](https://chromatic.com/docs/llms/hoverfocus.txt): Learn how to capture hover and focus states
- [Ignore tests and elements](https://chromatic.com/docs/llms/ignoring-elements.txt): Learn how you can tell Chromatic to ignore changes for certain elements
- [Media features](https://chromatic.com/docs/llms/media-features.txt): Learn how to use media features in Chromatic Capture
- [Page Shift Detection](https://chromatic.com/docs/llms/page-shift-detection.txt): Learn how to use media features in Chromatic Capture
- [Threshold](https://chromatic.com/docs/llms/threshold.txt): Learn how to fine-tune the amount of visual change between snapshots before they get marked as changes
- [Viewports](https://chromatic.com/docs/llms/viewports.txt): Configure Chromatic to test responsive UIs at various viewports and breakpoints.
- [Resource loading](https://chromatic.com/docs/llms/resource-loading.txt): Learn how Chromatic loads resources and waits to screenshot.
- [Snapshots](https://chromatic.com/docs/llms/snapshots.txt): What is a Snapshot in Chromatic
- [Position sticky & fixed](https://chromatic.com/docs/llms/position-sticky.txt): Learn how to snapshot position sticky and fixed elements
- [Font loading](https://chromatic.com/docs/llms/font-loading.txt): Learn how to preload fonts for fast and consistent visual testing.
- [Troubleshooting Snapshots](https://chromatic.com/docs/llms/troubleshooting-snapshots.txt): Tips for debugging and improving snapshot consistency
- [Branches and baselines](https://chromatic.com/docs/llms/branching-and-baselines.txt): How Chromatic decides what snapshots to compare when using UI Tests and UI Review

## Guides
- [UI Review in Dev-Centric Workflows](https://chromatic.com/docs/llms/dev-ui-review.txt): Learn how to use UI Review in concert with UI Tests for a robust, developer-centric workflow
- [Mocking APIs and Network Requests](https://chromatic.com/docs/llms/mock-network-requests.txt): Learn how to mock APIs and network requests in your tests (Storybook, Playwright and Cypress)
- [Using Chromatic with Nx](https://chromatic.com/docs/llms/nx.txt): Use Nx natively in CI with Chromatic and Storybook
- [Combine stories & E2E](https://chromatic.com/docs/llms/combine-stories-e2e.txt): Learn how to use Storybook, E2E testing frameworks (Playwright or Cypress) and Chromatic together for functional and visual testing UIs.
- [Chromatic for designers](https://chromatic.com/docs/llms/guide-for-designers.txt): How to use Chromatic for designers
- [In development workflow](https://chromatic.com/docs/llms/in-development.txt): How Chromatic helps teams develop applications
- [In pull request workflow](https://chromatic.com/docs/llms/in-pull-request.txt): How Chromatic helps you test and review pull requests
- [Mandatory PR checks](https://chromatic.com/docs/llms/mandatory-pr-checks.txt): Learn how to block pull requests that contain unapproved visual changes
- [Manual UI Review](https://chromatic.com/docs/llms/manual-ui-review.txt): Learn how to manually trigger a UI review
- [Globs](https://chromatic.com/docs/llms/globs.txt): Learn how to use glob patterns with the Chromatic`, including examples of how to exclude specific files or directories from testing.
- [Configure Chromatic features via Storybook params](https://chromatic.com/docs/llms/config-with-story-params.txt): Learn how to use Storybook parameters to configure Chromatic features at the project, component, and story level

## Collaborate
- [Figma in Chromatic](https://chromatic.com/docs/llms/figma-in-chromatic.txt): View Figma components next to their stories in Chromatic
- [Permalinks](https://chromatic.com/docs/llms/permalinks.txt): Learn to link to a published Storybook
- [Access control](https://chromatic.com/docs/llms/access.txt): Learn how to control who has access to your Chromatic project
- [Collaborators](https://chromatic.com/docs/llms/collaborators.txt): Learn how to add and manage collaborators
- [Storybook Figma plugin](https://chromatic.com/docs/llms/figma-plugin.txt): Connect stories to variants
- [Publish](https://chromatic.com/docs/llms/publish.txt): Learn how Chromatic helps document components.
- [Review](https://chromatic.com/docs/llms/review.txt): Learn how to get approval and feedback on visual changes from designers, product managers, and other key stakeholders with Chromatic's UI Review workflow.
- [Embed stories](https://chromatic.com/docs/llms/embed.txt): Embed your Storybook on Medium, Notion, and other platforms
- [Chromatic Markdown syntax](https://chromatic.com/docs/llms/markdown.txt): Learn how to use markdown in discussions
- [Composition](https://chromatic.com/docs/llms/composition.txt): Learn to combine Storybooks through composition
- [MCP](https://chromatic.com/docs/llms/mcp.txt): Learn how to deploy a Storybook MCP server using Chromatic.

## Playwright
- [Configure](https://chromatic.com/docs/llms/playwright/configure.txt): Learn about the various configuration options for visual tests for Playwright
- [Setup](https://chromatic.com/docs/llms/playwright.txt): Learn how to setup Chromatic for Playwright
- [Targeted snapshots](https://chromatic.com/docs/llms/playwright/targeted-snapshots.txt): Learn how to capture snapshots at specific points during your Playwright tests programmatically
- [Sharding](https://chromatic.com/docs/llms/playwright/sharding.txt): Learn how to run Playwright tests in parallel across shared CI jobs

## Cypress
- [Setup](https://chromatic.com/docs/llms/cypress.txt): Learn how to setup Chromatic for Cypress
- [Configure](https://chromatic.com/docs/llms/cypress/configure.txt): Learn about the various configuration options for visual tests for Cypress
- [Targeted snapshots](https://chromatic.com/docs/llms/cypress/targeted-snapshots.txt): Learn how to capture snapshots at specific points during your Cypress tests programmatically

## Account
- [Billing](https://chromatic.com/docs/llms/billing.txt): Chromatic billing information
- [Acceptable Use Policy](https://chromatic.com/docs/llms/acceptable-use.txt): Chromatic Acceptable Use Policy
- [Infrastructure upgrades](https://chromatic.com/docs/llms/infrastructure-upgrades.txt): Learn how Chromatic handles browser rendering changes to be minimally disruptive
- [Open source sponsorships](https://chromatic.com/docs/llms/open-source.txt): Chromatic sponsors open source component libraries
- [Security](https://chromatic.com/docs/llms/security.txt): Security overview and responsible disclosure
- [Terms of Service](https://chromatic.com/docs/llms/terms-of-service.txt): Chromatic Terms of Service
- [Privacy Policy](https://chromatic.com/docs/llms/privacy-policy.txt): Chromatic Privacy Policy
- [Notifications](https://chromatic.com/docs/llms/notifications.txt): Control when and how you receive activity notifications

## Troubleshooting
- [Support](https://chromatic.com/docs/llms/support.txt): Chromatic's support guidelines