This is a list of available addons for Storybook.

Addons maintained by storybook team.

a11y

With a11y you can test compliance of your stories with web accessibility standards.

Actions

With actions, you can inspect events related to your components. This is pretty neat when you are manually testing your components.

Also, you can think of this as a way to document events in your components.

Links

With links you can link stories together. With that, you can build demos and prototypes directly from your UI components.

Knobs

Knobs allow you to edit React props dynamically using the Storybook UI. You can also use Knobs as dynamic variables inside your stories.

Notes

With this addon, you can write notes for each story in your component. This is pretty useful when you are working with a team.

Info

If you are using Storybook as a style guide, then this addon will help you to build a nice-looking style guide with docs, automatic sample source code with a PropType explorer.

Options

The Storybook webapp UI can be customised with this addon. It can be used to change the header, show/hide various UI elements and to enable full-screen mode by default.

Storyshots

Storyshots is a way to automatically jest-snapshot all your stories. More info here.

Console

Redirects console output (logs, errors, warnings) into Action Logger Panel. withConsole decorator notifies from what stories logs are coming.

Backgrounds

With this addon, you can switch between background colors and background images for your preview components. It is really helpful for styleguides.

Viewport

Viewport allows your stories to be displayed in different sizes and layouts in Storybook. This helps build responsive components inside of Storybook.

Google Analytics

Support google analytics in Storybook

Storysource

Show story source in the addon panel.

Community Addons

You need to install these addons directly from NPM in order to use them.

Readme

With this addon, you can add docs in markdown format for each story. It’s very useful because most projects and components already have README.md files. Now it is easy to add them into your Storybook.

Story-router

A decorator that allows you to use your routing-aware components in your stories.

Host

A decorator with powerful display options for hosting, sizing and framing your components.

Specs

This is a very special addon where it’ll allow you to write test specs directly inside your stories. You can even run these tests inside a CI box.

Chapters

With this addon, you can showcase multiple components (or varying component states) within 1 story. Break your stories down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.

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.

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

i18n tools

With this addon, you can test your storybooks with a different text-direction. It is very useful if you are working on components that have to work both in LTR as well as in RTL languages.

JSX preview

This addon shows a preview of the JSX code for each story. It allows you to configure the display and copy the code with a single click.

Intl

With this addon you will have an additional panel at the bottom which provides you buttons to switch the locale and directly see the result in the preview.

Versions

This addon lets you navigate different versions of static Storybook builds. As such you can see how a component has changed over time.

Apollo

Wrap your stories with the Apollo client for mocking GraphQL queries/mutations.

Screenshot

Save the screenshot image of your stories. via Puppeteer.

Styles

Add ability to customize styles in the story preview area

Figma

Embed Figma designs in a storybook panel.

State

Manage state inside a story using a store. Update components when this state changes.

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.

State

Store/retrieve arbitrary data. Similar to knobs this doesn’t add any additional React wrappers to the story, so any other addons used (prop-types, jsx) aren’t effected. Has a React hooks like API.

story2sketch

Convert stories into Sketch 💎 symbols.

styled components theme

styled components theme selection.

AngularJS

Create stories with AngularJS(1.x) components.

JSS theme

JSS theme selection.

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.

storybook-addon-react-docgen

Display react docgen info. This addon is a drop in replacement for the @storybook/addon-info’s prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!

storybook-dark-mode

Let your users toggle between a dark and light mode.