Building Custom Addons

Addon architecture

Storybook addons are npm packages that register with the Storybook API. They can add UI panels, toolbar buttons, and interact with stories via presets and parameters.

Creating a simple addon

Build an addon that adds custom metadata to stories or provides additional testing capabilities specific to your team's needs.

Sharing addons

Publish your custom addon to npm to share it with your team or the community. Well-documented addons help other developers leverage your work.

Addon configuration example

Register your addon in the main configuration.

// .storybook/main.ts
export default {
  addons: [
    '@storybook/addon-essentials',
    'my-custom-addon',
  ],
};