Supercharge Storybook

Storybook addons enable advanced functionality and unlock new workflows. Contributed by core maintainers and the amazing developer community.

Official addons

Create your own addon
Customize Storybook’s UI, API, and create custom workflows by building your own addon
Learn how to build an addon

Community addons

Build a nice-looking style guide with docs and automatic sample source code with a PropType explorer.
Add docs in Markdown format for each story. It’s useful because most projects and components already have files.
A decorator that allows you to use your routing-aware components in your stories.
With this addon, you can showcase multiple components (or varying component states) within one story. Break your stories down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.
A decorator with powerful display options for hosting, sizing and framing your components.
Navigate different versions of static Storybook builds to see how a component has changed over time.
An elegant way to wrap your component stories and change their contextual environment directly and dynamically in Storybook UI!
This addon will allow you to write tests based on your stories and display results directly inside Storybook.
Props combinations
Given possible values for each prop, renders your component with all combinations of prop values. Useful for finding edge cases or just seeing all component states at once.
Save the screenshot image of your stories (via Puppeteer).
Toggle the locale and directly see the result in the preview. Intl library agnostic - can be used with any intl library. Supports automatic lrt/rtl change.
Toggle the locale and directly see the result in the preview.
JSX preview
Get a preview of the JSX code for each story. Configure the display and copy the code with a single click.
React live edit
Provides live react story editing and preview.
Copy code block
Display code and copy it to the clipboard. It also has options to customize colors and syntax highlighting for any language. There is similar functionality via @storybook/addon-info but addon-info doesn’t currently work when using @storybook/html.
AngularJS (1.x)
Create stories with AngularJS(1.x) components.
Data & State
Wrap your stories with the Apollo client for mocking GraphQL queries/mutations.
Manage state inside a story. Update components when this state changes. Wrap the story in a function call to setup state management. The story can modify state properties with the provided store. The addon provides a panel to view and reset state.
Wraps your story into MuiThemeProvider. It allows you to add your custom themes, switch between them, make changes in the visual editor and download as JSON file.
Add ability to customize styles in the story preview area
styled-components theme
Select between styled components themes.
JSS theme
Select between JSS themes.
Root Attribute
Provides the ability to change the html or body attribute.
Design Token
Automatically generate design token documentation from your stylesheets and icon files.
Convert stories into Sketch symbols.
Embed Figma designs in a storybook panel.

Build UIs faster. Add Storybook to your project now.