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
264
Downloads per week

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