storybook/docs/addons/addon-knowledge-base.md

title
Addons knowledge base

Once you understand the basics of writing addons, there are a variety of common enhancements to make your addon better. This page details additional information about addon creation. Use it as a quick reference guide when creating your own addons.

Disabling the addon panel

It’s possible to disable the addon panel for a particular story.

To make that possible, you need to pass the paramKey element when you register the panel:

<CodeSnippets paths={[ 'common/storybook-addon-disable-addon.js.mdx', ]} />

Then when adding a story, you can pass a disabled parameter.

<CodeSnippets paths={[ 'react/button-story-disable-addon.js.mdx', ]} />

Styling your addon

Storybook uses Emotion for styling. Alongside with a theme which you can customize!

We recommend you also to use Emotion to style your addon’s UI components. That allows you to use the active Storybook theme to deliver a seamless developer experience. If you don’t want to use Emotion, you can use inline styles or another css-in-js lib. You can receive the theme as a prop by using the withTheme hoc from Emotion. Read more about theming.

Storybook components

Addon authors can develop their UIs using any React library. But we recommend using Storybook’s own UI components in @storybook/components to build addons faster. When you use Storybook components you get:

• Battle-tested off-the-shelf components
• Storybook native look and feel
• Built-in support for Storybook theming

Use the components listed below with your next addon.

Component	Source	Story
Action Bar	See component implementation	See component story
Addon Panel	See component implementation	N/A
Badge	See component implementation	See component story
Button	See component implementation	See component story
Form	See component implementation	See component story
Loader	See component implementation	See component story
PlaceHolder	See component implementation	See component story
Scroll Area	See component implementation	See component story
Space	See component implementation	See component story
Syntax Highlighter	See component implementation	See component story
Tabs	See component implementation	See component story
ToolBar	See component implementation	N/A
ToolTip	See component implementation	See component story
Zoom	See component implementation	See component story

Complementing the components, also included is a set of UI primitives. Use the content listed below as reference for styling your addon.

Component	Source	Story
Color Pallette (see note below)	See implementation	See story
Icon	See implementation	See story
Typography	See implementation	See story

The color pallette implemented by @storybook/components is a high level abstraction of the implementation of @storybook/theming package.

Build system

When you are developing your addon as a package, you can’t use npm link to add it to your project. List your addon as a local dependency into your package.json:

{
  "dependencies": {
    "@storybook/addon-controls": "file:///home/username/myrepo"
  }
}

Run either yarn or npm install to install the addon.

Hot module reload

While developing your addon you can configure HMR (hot module replacement ) to reflect the changes made.

Standalone Storybook addons

If you're developing a standalone addon, add a new script to package.json with the following:

{
  "scripts":{
    "start": "npm run build -- --watch",
  }
}

Local Storybook addons

If you're developing a local Storybook addon (an addon built on top of a existing Storybook installation) HMR (hot module replacement) should be available out of the box. If you don't see the changes being reflected, add the flag --no-manager-cache to the storybook script and restart Storybook.