New
I18n with StorybookAutomate with Chromatic
Star74,173
View full catalog
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon Add to the catalog
Variants Addon
Show all variants of a component in a grid
npm install storybook-addon-variants
Last updated about 2 months ago
1.4k
Downloads per week
Readme View on GitHub




Storybook Variants Addon

Show all variants of a component in a grid

  • 📦 No extra code required for creating variants.
  • 📝 Editing from Controls table and editor re-renders all variants.

Getting Started

First install it

npm install storybook-addon-variants

Register the addon in your main.js file

// .storybook/main.js

module.exports = {
  stories: [...],
  addons: ["storybook-addon-variants"],
};

Enable your component variants

There are two ways to do so:

  1. By using the toolbar button:

  1. By defining a parameter in your story:
// /MyComponent.stories.js

// ...rest of code omitted for brevity

// CSF2 syntax example
export const MyStory = Template.bind({})
MyStory.parameters = {
  variants: {
    enable: true
  }
};

// or CSF3 syntax example
export const MyStory = {
  parameters: {
    variants: {
      enable: true
    }
  }
};

By defining this parameter, this story will always render with all variants, regardless of what you select in the toolbar.

This method is quite useful if you want to have a fixed story that shows all variants in your sidebar. It's particularly useful for visual regression testing, when you want to take snapshots of all variants at once with tools like Chromatic.

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI