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
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:
main.js configuration file is a preset and as such has a powerful interface, but the key fields within it are:
stories- an array of globs that indicates the location of your story files, relative to
addons- a list of the addons you are using.
webpackFinal- custom webpack configuration.
babel- custom babel configuration.
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
.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:
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 file can be an ES module and export the following keys:
decorators- an array of global decorators
parameters- an object of global parameters
globalTypes- definition of globalTypes
If you’re looking to change how your stories are ordered, read about sorting stories.
To control the behaviour of Storybook’s UI (the “manager”), you can create a