| title |
|---|
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.
If you ran npx storybook@latest init to include Storybook in your project, the latest version of the Essentials addon (@storybook/addon-essentials) is already installed and configured for you. You can go ahead and skip the rest of this section.
However, if you intend to install the Essentials addon manually into an existing Storybook instance, you can do so by running the following command in your terminal:
<CodeSnippets paths={[ 'common/storybook-addon-essentials-install.yarn.js.mdx', 'common/storybook-addon-essentials-install.npm.js.mdx', 'common/storybook-addon-essentials-install.pnpm.js.mdx', ]} />
Update your Storybook configuration (in .storybook/main.js|ts) to include the Essentials addon.
<CodeSnippets paths={[ 'common/storybook-main-register-essentials-addon.js.mdx', 'common/storybook-main-register-essentials-addon.ts.mdx', ]} />
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, and depending on the method of choice, register them in your Storybook configuration file (i.e., .storybook/main.js|ts) and adjust the configuration to suit your needs. For example:
<CodeSnippets paths={[ 'common/storybook-addon-actions-install.yarn.js.mdx', 'common/storybook-addon-actions-install.npm.js.mdx', 'common/storybook-addon-actions-install.pnpm.js.mdx', ]} />
<CodeSnippets paths={[ 'common/storybook-main-register-individual-actions-addon.js.mdx', 'common/storybook-main-register-individual-actions-addon.ts.mdx', ]} />
Below is an abridged configuration and table with all the available options for each addon.
<CodeSnippets paths={[ 'common/storybook-main-full-individual-essentials-config.js.mdx', 'common/storybook-main-full-individual-essentials-config.ts.mdx', ]} />
| Addon | Option | Description |
|---|---|---|
@storybook/addon-actions |
N/A | N/A |
@storybook/addon-viewport |
N/A | N/A |
@storybook/addon-docs |
csfPluginOptions |
Provides additional configuration for Storybook's CSF plugin. Can be disabled with null. |
jsxOptions |
Extends the default Babel configuration options for processing Markdown and MDX files. | |
mdxPluginOptions |
Provides additional configuration options and plugin configuration for MDX documentation. | |
@storybook/addon-controls |
N/A | N/A |
@storybook/addon-backgrounds |
N/A | N/A |
@storybook/addon-toolbars |
N/A | N/A |
@storybook/addon-measure |
N/A | N/A |
When you start Storybook, your custom configuration will override the default.
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:
<CodeSnippets paths={[ 'common/storybook-main-disable-addon.js.mdx', 'common/storybook-main-disable-addon.ts.mdx', ]} />
💡 You can use the following keys for each individual addon: actions, backgrounds, controls, docs, viewport, toolbars, measure, outline, highlight.