Back to blog

Create Storybook Addon

Launching an Addon Kit and in-depth guide

loading
Varun Vachhar
โ€” @winkerVSbecks
Last updated:

Every team delivers UI differently. There are infinite workflows that vary from tools to tech stack to testing strategy. Storybook is super flexible, which means that you can adapt it to any process.

Addons are a convenient way to customize Storybook to fit your workflow. The community uses addons to automate tedious jobs, integrate libraries, and invent new ways to collaborate. We created an Addon Kit and in-depth guide to help you build an addon for yourself.

Why build an addon?

Storybook's extensible architecture provides a foundation to build custom workflows. You can scratch your own itch to improve an awkward integration. Or automate cumbersome tasks that everyone hates doing. Let's look at a few examples.

Getting started

So youโ€™ve got some ideas brewing and want to build your own addon? We gathered a bunch of useful resources to help you get started:

You can also explore open source addons such as Pseudo States, Dark Mode and the other official addons. Theyโ€™re real world examples for you to learn from.

Storybook Addon Kit

It's frustrating to spend time bootstrapping a project when all you want to do is start coding. We hear you. Dive into building your addon without dealing with configurations, so we put together an Addon Kit. It offers everything you need to get started:

  • ๐Ÿ“ Live-editing in development mode
  • โš›๏ธ React/JSX support for the UI
  • ๐Ÿ“ฆ Transpiling and bundling with Babel
  • ๐Ÿท Plugin metadata
  • ๐Ÿšข Release management with Auto

Use it to bootstrap a new addon instantly!

Create an Addon Guide

Iโ€™ve put together an in-depth guide that shows you how to create an addon. Follow along as we code the Outline addonโ€”used for visually debugging CSS layout and alignment. It adds a toolbar button that outlines all UI elements, making it easy to verify positioning and placement at a glance.

Along the way youโ€™ll learn about the inner workings of Storybook and the addon API, and publish your first addon.

Conclusion

Storybookโ€™s extensible architecture allows you to customize it, automate workflows, and integrate with your favourite tools. Addons play a key role in this. In fact, most of Storybookโ€™s core features are implemented as addons. For instance: documentation, accessibility testing and interactive controls, among others.

Storybookโ€™s addon API provides utilities and helpers to build your addon fast. Whatโ€™s more, you can share those addons with thousands of developers via the addon catalog.

Now, get started and we canโ€™t wait to see what you create!

Join the Storybook mailing list

Get the latest news, updates and releases

6,615 developers and counting

Weโ€™re hiring!

Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first.

View jobs

Popular posts

Storybook for Webpack 5

Next-gen tooling with pluggable builders
loading
Michael Shilman

Storybook for Svelte

The workshop for cybernetically enhanced components
loading
Michael Shilman

Storybook for Vue 3

Supporting the next-gen progressive JS framework
loading
Michael Shilman
Join the community
6,615 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetry
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI