https://github.com/itaditya/storybook-addon-variants
Show all variants of a component in a grid
https://github.com/itaditya/storybook-addon-variants
Last synced: over 1 year ago
JSON representation
Show all variants of a component in a grid
- Host: GitHub
- URL: https://github.com/itaditya/storybook-addon-variants
- Owner: itaditya
- License: mit
- Created: 2022-06-24T16:54:34.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-01T18:54:44.000Z (almost 4 years ago)
- Last Synced: 2025-02-27T06:08:46.069Z (over 1 year ago)
- Language: JavaScript
- Homepage: storybook-addon-variants.vercel.app
- Size: 1.01 MB
- Stars: 32
- Watchers: 3
- Forks: 8
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```sh
npm install storybook-addon-variants
```
#### Register the addon in your main.js file
```js
// .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:
2. By defining a parameter in your story:
```js
// /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](https://www.chromatic.com/).