1 | # Storybook Essentials
|
2 |
|
3 | Storybook Essentials is a curated collection of addons to bring out the best of Storybook.
|
4 |
|
5 | Each 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 |
|
9 | Storybook 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 |
|
20 | You can add Essentials to your project with:
|
21 |
|
22 | ```
|
23 | npm install --save-dev @storybook/addon-essentials
|
24 | ```
|
25 |
|
26 | And then add the following line to your `.storybook/main.js`:
|
27 |
|
28 | ```js
|
29 | module.exports = {
|
30 | addons: ['@storybook/addon-essentials'],
|
31 | };
|
32 | ```
|
33 |
|
34 | ## Configuration
|
35 |
|
36 | Essentials is "zero config." That means that comes with a recommended configuration out of the box.
|
37 |
|
38 | If 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 |
|
42 | You can disable any of Essential's addons using the following configuration scheme in `.storybook/main.js`:
|
43 |
|
44 | ```js
|
45 | module.exports = {
|
46 | addons: [{
|
47 | name: '@storybook/addon-essentials',
|
48 | options: {
|
49 | <addon-key>: false,
|
50 | }
|
51 | }]
|
52 | };
|
53 | ```
|
54 |
|
55 | Valid addon keys include: `actions`, `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`.
|