Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic

You're viewing older docs for version 6.5. View latest docs

Types of addons

Each Storybook addon is classified into two general categories, UI-based or Presets. Each type of addons features are documented here. Use this as a reference when creating your addon.

UI-based addons

UI-based addons allow you to customize Storybook's UI with the following elements.


Panel addons allow you to add your own UI in Storybook's addon panel. This is the most common type of addon in the ecosystem. For example the official @storybook/actions and @storybook/a11y use this pattern.

Storybook panel

Use this boilerplate code to add a new Panel to Storybook's UI:


Toolbar addons allow you to add your own custom tools in Storybook's Toolbar. For example the official @storybook/backgrounds and the storybook-addon-outline use this pattern.

Storybook toolbar addon

Use this boilerplate code to add a new button to Storybook's Toolbar:

The icon element used in the example loads the icons from the @storybook/components package. See here for the list of available icons that you can use.


Tab addons allow you to create your own custom tabs in Storybook. For example, the official @storybook/addon-docs uses this pattern.

Storybook tab addon

Use this boilerplate code to add a new Tab to Storybook's UI:

Learn how to write your own addon that include these UI elements here.

Preset addons

Storybook preset addons are grouped collections of babel, webpack, and addons configurations to integrate Storybook and other technologies. For example the official preset-scss and preset-create-react-app.

Use this boilerplate code while writing your own preset addon.

Learn more about writing your own preset addon here.

Was this page helpful?

Markdown accepted ([link text](url), _italic_, **bold**, etc). Your anonymous feedback will be posted publicly on GitHub.

✍️ Edit on GitHub – PRs welcome!
Join the community
6,304 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI