UNPKG

2.1 kBMarkdownView Raw
1# Storybook Essentials
2
3Storybook Essentials is a curated collection of addons to bring out the best of Storybook.
4
5Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/react/api/frameworks-feature-support) for all of the officially supported frameworks.
6
7## Contents
8
9Storybook essentials includes the following addons. Addons can be disabled and re-configured as [described below](#configuration):
10
11- [Actions](https://github.com/storybookjs/storybook/tree/next/addons/actions)
12- [Backgrounds](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds)
13- [Controls](https://github.com/storybookjs/storybook/tree/next/addons/controls)
14- [Docs](https://github.com/storybookjs/storybook/tree/next/addons/docs)
15- [Viewport](https://github.com/storybookjs/storybook/tree/next/addons/viewport)
16- [Toolbars](https://github.com/storybookjs/storybook/tree/next/addons/toolbars)
17
18## Installation
19
20You can add Essentials to your project with:
21
22```
23npm install --save-dev @storybook/addon-essentials
24```
25
26And then add the following line to your `.storybook/main.js`:
27
28```js
29module.exports = {
30 addons: ['@storybook/addon-essentials'],
31};
32```
33
34## Configuration
35
36Essentials is "zero config." That means that comes with a recommended configuration out of the box.
37
38If you want to reconfigure an addon, simply install that addon per that addon's installation instructions and configure it as normal. Essentials scans your project's `main.js` on startup and if detects one of its addons is already configured in the `addons` field, it will skip that addon's configuration entirely.
39
40## Disabling addons
41
42You can disable any of Essential's addons using the following configuration scheme in `.storybook/main.js`:
43
44```js
45module.exports = {
46 addons: [{
47 name: '@storybook/addon-essentials',
48 options: {
49 <addon-key>: false,
50 }
51 }]
52};
53```
54
55Valid addon keys include: `actions`, `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`.