Join live session: Test your components in browser with Storybook Test
Docs Essentials
Storybook Docs

Essential addons

A major strength of Storybook are addons that extend Storybook’s UI and behavior. Storybook ships by default with a set of “essential” addons that add to the initial user experience. There are many third-party addons as well as “official” addons developed by the Storybook core team.

Installation

If you ran storybook init to include Storybook in your project, the Essentials addon (@storybook/addon-essentials) is already installed and configured for you. You can skip the rest of this section.

If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal:

npm install @storybook/addon-essentials --save-dev

Update your Storybook configuration (in .storybook/main.js) to include the Essentials addon.

.storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
};

Configuration

Essentials is "zero-config”. It comes with a recommended configuration out of the box.

If you need to reconfigure any of the individual Essentials addons, install them manually by following the installation instructions, register them in your Storybook configuration file (i.e., .storybook/main.js) and adjust the configuration to suit your needs. For example:

npm install @storybook/addon-actions --save-dev
.storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-actions'],
};

Below is an abridged configuration and table with all the available options for each addon.

.storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-actions',
    '@storybook/addon-viewport',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null,
        transcludeMarkdown: true,
      },
    },
    '@storybook/addon-controls',
    '@storybook/addon-backgrounds',
    '@storybook/addon-toolbars',
    '@storybook/addon-measure',
    '@storybook/addon-outline',
  ],
};
AddonConfiguration elementDescription
@storybook/addon-actionsN/AN/A
@storybook/addon-viewportN/AN/A
@storybook/addon-docsconfigureJSXEnables JSX support in MDX for projects that aren't configured to handle the format.
configureJSX: true
babelOptionsProvides additional Babel configurations for file transpilation.
babelOptions: { plugins: [], presets: []}
Extends configureJSX.
sourceLoaderOptionsProvides additional configuration for Storybook's source loader.
Required for @storybook/addon-storysource.
sourceLoaderOptions: null .
transcludeMarkdownEnables Markdown file support into MDX and render them as components.
transcludeMarkdown: true
@storybook/addon-controlsN/AN/A
@storybook/addon-backgroundsN/AN/A
@storybook/addon-toolbarsN/AN/A
@storybook/addon-measureN/AN/A

When you start Storybook, your custom configuration will override the default.

Disabling addons

If you need to disable any of the Essential's addons, you can do it by changing your .storybook/main.js file.

For example, if you wanted to disable the backgrounds addon, you would apply the following change to your Storybook configuration:

.storybook/main.js
module.exports = {
  addons: [{
    name: '@storybook/addon-essentials',
    options: {
      backgrounds: false,
    }
  }]
};

You can use the following keys for each individual addon: actions, backgrounds, controls, docs, viewport, toolbars, measure, outline.