Version:
Framework:

Add to the addon catalog

Storybook addons are listed in the catalog and distributed via npm. The catalog is populated by querying npm's registry for Storybook-specific metadata in package.json.

Add your addon to the catalog by publishing an npm package that follows these requirements:

  • package.json with module information and addon metadata
  • README.md file with installation and configuration instructions
  • /dist directory containing transpiled ES5 code
  • preset.js file written as an ES5 module at the root level

Get a refresher on how to write a Storybook addon.

Addon metadata

We rely on metadata to organize your addon in the catalog. You must add the storybook-addons as the first keyword, followed by your addon's category. Additional keywords will be used in search and as tags.

PropertyDescriptionExample
nameAddon package namestorybook-addon-outline
descriptionAddon descriptionOutline all elements with CSS to help with layout placement and alignment
authorName of the authorwinkerVSbecks
keywordsList of keywords to describe the addon["storybook-addons","style","debug"]
repositoryAddon repository{"type": "git","url": "https://github.com/someone/my-addon" }

Customize your addon's appearance by adding the storybook property with the following fields.

PropertyDescriptionExample
displayNameDisplay nameOutline
iconLink to custom icon for the addon (SVG are not supported)https://yoursite.com/outline-icon.png
unsupportedFrameworksList of unsupported frameworks["vue"]
supportedFrameworksList of supported frameworks["react", "angular"]

Use the list below as a reference when filling in the values for both the supportedFrameworks and unsupportedFrameworks fields.

  • react
  • vue
  • angular
  • web-components
  • ember
  • html
  • mithril
  • marko
  • svelte
  • riot
  • preact
  • rax
  • aurelia
  • marionette
  • react-native
💡 Make sure to copy each item exactly as listed so that we can properly index your addon in our catalog.

The package.json above appears like below in the catalog. See an example of a production package.json here.

Storybook addon in the catalog

How long does it take for my addon to show up in the catalog?

Once you publish the addon, it will appear in the catalog. There may be a delay between the time you publish your addon and when it's listed in the catalog. If your addon doesn't show up within 24 hours, open an issue.

Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify