New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,376
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-contrast
Deprecated
Contrast is a Storybook Addon that automatically tells you the difference between your code and Figma designs. It's like a spell-checker for UI.
npm install storybook-contrast
98
Downloads per week
Readme View on GitHub

Contrast Storybook Addon

This addon is used to show Contrast handoff tool in the addon panel.

Demo

Check out a demo here :)

Demo

Getting Started

  1. Install the Addon
yarn add storybook-contrast
  1. Add the following to your .storybook/main.js exports:
module.exports = {
    addons: ["storybook-contrast"]
};
  1. Add script tag to your .storybook/preview-head.html. More info on preview-head here
<script
    id="contrast-snippet"
    src="http://contrast-snippet.s3.amazonaws.com/contrast-snippet.js"
></script>
  1. Open Contrast Addon in Storybook

Support

Questions or feedback? You can reach us at support@contrast.app or through chat in the app.

Documentation

https://help.contrast.app/52b293cd09494a609de1848c315b5bd7

Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI