Addons

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

Organize
Info
Build a nice-looking style guide with docs and automatic sample source code with a PropType explorer.
Readme
Add docs in Markdown format for each story. It’s useful because most projects and components already have README.md files.
Story-router
A decorator that allows you to use your routing-aware components in your stories.
Chapters
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.
Host
A decorator with powerful display options for hosting, sizing and framing your components.
Versions
Navigate different versions of static Storybook builds to see how a component has changed over time.
Contexts
An elegant way to wrap your component stories and change their contextual environment directly and dynamically in Storybook UI!
Test
Specs
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.
Screenshot
Save the screenshot image of your stories (via Puppeteer).
i18n
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.
Intl
Toggle the locale and directly see the result in the preview.
Code
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
Apollo
Wrap your stories with the Apollo client for mocking GraphQL queries/mutations.
State
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.
Style
Material-UI
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.
Styles
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
Story2sketch
Convert stories into Sketch symbols.
Figma
Embed Figma designs in a storybook panel.

Build UIs faster. Add Storybook to your project now.