Noncollinear Perpendicular Microcrystalline

    storybook-addon-variants
    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
    
    // ...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.

    Install

    npm i storybook-addon-variants

    DownloadsWeekly Downloads

    390

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    26.3 kB

    Total Files

    20

    Last publish

    Collaborators

    • itaditya