Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Variants Addon
Show all variants of a component in a grid
npm install storybook-addon-variants
Last updated over 1 year ago
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

// 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
6,583 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI