Create an Addon
  • Introduction
  • Setup
  • Register addon
  • Track state
  • Decorators
  • Preset
  • Add to catalog
  • Conclusion
Framework:
React

Setup

Get started with the Addon Kit

We'll use the Addon Kit to bootstrap our project. It gives you everything you need to build a Storybook addon:

  • 📝 Live-editing in development mode
  • ⚛️ React/JSX support for the UI
  • 📦 Transpiling and bundling with Babel
  • 🏷 Plugin metadata
  • 🚢 Release management with Auto

To start, click the Use this template button on the Addon Kit repository. This will generate a new repository for you with all the Addon Kit code.

addon kit

Next, clone your repository and install dependencies.

yarn

The Addon Kit uses TypeScript by default. However, we'll use the eject command to convert the boilerplate code to JavaScript for the purposes of this tutorial.

yarn eject-ts

This will convert all code to JS. It is a destructive process, so we recommended running this before you start writing any code.

Finally, start the development mode. This starts up Storybook and runs babel in watch mode.

yarn start

The addon code lives in the src directory. The included boilerplate code demonstrates the three UI paradigms and other concepts such as managing state and interacting with a story. We'll explore this in more detail in the next few sections.

Keep your code in sync with this chapter. View d3b6651 on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Register addon
Build the addon UI and register it in Storybook
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookDocsTutorialsReleasesAddonsBlogGet involvedUse casesSupportTeam
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify