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.
This addon will allow you to write tests based on your stories and display results directly inside Storybook.
Add different paddings to your preview. Useful for checking how components behave when surrounded with white space.
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.
Responsive Views
View your stories in a range of responsive viewports
Resize your responsive viewports dynamically with a draggable handle, exact px/em width inputs, or with one-click preset size buttons.
Rendering components with a matrix of props. This addon can also be used with storyshots.
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.
Allow to render stories in AMP-HTML. It also has options to view and validate the generated code.
Display the compiled HTML for each story.
Code Preview
Display code preview with user selected knobs in various framework code.
Open Component Code
Open the code of the component used in story directly in VS code (dev/local) and in Github repo (deployed/production)
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.
Put GraphQL queries to your stories and either see the default formatted output or pass received data to your Components. Can be connected to any GraphQL endpoint but have additional features for GraphCMS projects.
Display form state for formik-aware components.
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.
Theme Playground
Select between themes and tweek them directly in a panel.
Allows you to change the theme based on a css class name and adds a theme selection control to the Storybook panel.
React Theming Addon
Universal addon for developing themed React Apps, Components and Themes objects themselves. Supports Styled Components, Emotion, Material UI and any similar theming providers. Change colors dynamically and switch between themes. Edit props in themes of any shapes. Has API for extending under your needs.
Convert stories into Sketch symbols.
Embed Figma designs in a storybook panel.
Embed XD designs in a storybook panel.
Design with Playroom inside Storybook, using each story source as a starting point.
Vertical Rhythm decorator
Take an eye over the vertical rhythm of your stories with this decorator.
Mobile UX Hints
Suggestions on how to tweak the HTML and CSS of your components to be more mobile-friendly.
Embed Zeplin designs in a storybook panel.
Embed Contrast handoff tool in a storybook panel.
Dark Mode
Change Storybook to dark mode.

Build UIs faster. Add Storybook to your project now.