1 | # Storybook Addon Backgrounds
|
2 |
|
3 | Storybook Addon Backgrounds can be used to change background colors inside the preview in [Storybook](https://storybook.js.org).
|
4 |
|
5 | [Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
6 |
|
7 | ![React Storybook Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/backgrounds/docs/addon-backgrounds.gif)
|
8 |
|
9 | ## Installation
|
10 |
|
11 | Backgrounds is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
12 |
|
13 | ```sh
|
14 | npm i -D @storybook/addon-backgrounds
|
15 | ```
|
16 |
|
17 | ## Configuration
|
18 |
|
19 | Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
|
20 |
|
21 | ```js
|
22 | export default {
|
23 | addons: ['@storybook/addon-backgrounds'],
|
24 | };
|
25 | ```
|
26 |
|
27 | ## Usage
|
28 |
|
29 | The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/backgrounds).
|