mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 06:41:25 +08:00
94 lines
5.4 KiB
Plaintext
94 lines
5.4 KiB
Plaintext
---
|
||
title: 'Essential addons'
|
||
hideRendererSelector: true
|
||
sidebar:
|
||
order: 6
|
||
title: Essential addons
|
||
---
|
||
|
||
A major strength of Storybook are [addons](https://storybook.js.org/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.
|
||
|
||
* [Actions](./actions.mdx)
|
||
* [Backgrounds](./backgrounds.mdx)
|
||
* [Controls](./controls.mdx)
|
||
* [Docs](../writing-docs/index.mdx)
|
||
* [Highlight](./highlight.mdx)
|
||
* [Measure & outline](./measure-and-outline.mdx)
|
||
* [Toolbars & globals](./toolbars-and-globals.mdx)
|
||
* [Viewport](./viewport.mdx)
|
||
|
||
### Installation
|
||
|
||
If you ran `npx storybook@latest init` to include Storybook in your project, the latest version of the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/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:
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="storybook-addon-essentials-install.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
Update your Storybook configuration (in [`.storybook/main.js|ts`](../configure/index.mdx#configure-story-rendering)) to include the Essentials addon.
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="storybook-main-register-essentials-addon.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
### 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](https://storybook.js.org/addons/tag/essentials), 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`](../configure/index.mdx#configure-story-rendering)) and adjust the configuration to suit your needs. For example:
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="storybook-addon-actions-install.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="storybook-main-register-individual-actions-addon.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
Below is an abridged configuration and table with all the available options for each addon.
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="storybook-main-full-individual-essentials-config.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
| 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`. |
|
||
| | `mdxPluginOptions` | Provides additional configuration options and plugin configuration for [MDX documentation](../writing-docs/mdx.mdx#markdown-tables-arent-rendering-correctly). |
|
||
| `@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.
|
||
|
||
### Disabling addons
|
||
|
||
If you need to disable any of the Essential's addons, you can do it by changing your [`.storybook/main.js`](../configure/index.mdx#configure-story-rendering) file.
|
||
|
||
For example, if you wanted to disable the [backgrounds addon](./backgrounds.mdx), you would apply the following change to your Storybook configuration:
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="storybook-main-disable-addon.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
<Callout variant="info" icon="💡">
|
||
You can use the following keys for each individual addon: `actions`, `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`, `measure`, `outline`, and `highlight`.
|
||
</Callout>
|