Noncollinear Perpendicular Microcrystalline

    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    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.


    npm i storybook-addon-variants

    DownloadsWeekly Downloads






    Unpacked Size

    26.3 kB

    Total Files


    Last publish


    • itaditya