Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic

You're viewing older docs for version 6.3. View latest docs

Configure Storybook

Storybook is configured via a folder, called .storybook which contains various configuration files.

Note you can change the folder that Storybook uses by setting the -c flag to your start-storybook and build-storybook scripts.

Configure your Storybook project

The main configuration file is main.js. This file controls the behavior of the Storybook server, and so you must restart Storybook’s process when you change it. It contains the following:

The main.js configuration file is a preset and as such has a powerful interface, but the key fields within it are:

Tip: Customize your default story by referencing it first in the `stories` array.

Configure story loading

By default, Storybook will load stories from your project based on a glob (pattern matching string) in .storybook/main.js that matches all files in your project with extension .stories.js. The intention is you colocate a story file with the component it documents.

If you want to use a different naming convention, you can alter the glob, using the syntax supported by micromatch.

For example if you wanted to pull both .md and .js files from the my-project/src/components directory, you could write:

If you want to use a custom logic for loading stories which is not supported by a glob pattern, you can supply the final list of stories files:

Configure story rendering

To control the way stories are rendered and add global decorators and parameters, create a .storybook/preview.js file. This is loaded in the Canvas tab, the “preview” iframe that renders your components in isolation. Use preview.js for global code (such as CSS imports or JavaScript mocks) that applies to all stories.

The preview.js file can be an ES module and export the following keys:

If you’re looking to change how your stories are ordered, read about sorting stories.

Configure Storybook’s UI

To control the behaviour of Storybook’s UI (the “manager”), you can create a .storybook/manager.js file.

This file does not have a specific API but is the place to set UI options and to configure Storybook’s theme.

Was this page helpful?

Markdown accepted ([link text](url), _italic_, **bold**, etc). Your anonymous feedback will be posted publicly on GitHub.

✍️ Edit on GitHub – PRs welcome!
Join the community
6,304 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI