Storybook is configured via a folder called
.storybook, which contains various configuration files.
Note that you can change the folder that Storybook uses by setting the
-c flag to your
storybook dev and
storybook build CLI commands.
Storybook's main configuration (i.e., the
main.js|ts) defines your Storybook project's behavior, including the location of your stories, the addons you use, feature flags and other project-specific settings. This file should be in the
|The array of globs that indicates the location of your story files, relative to |
|Sets a list of directories of static files to be loaded by Storybook |
|Sets the list of addons loaded by Storybook |
|Configures how Storybook handles TypeScript files |
|Configures Storybook based on a set of framework-specific settings |
|Configures Storybook's internal features |
|Configures Storybook's auto-generated documentation|
|Enables Storybook's additional features|
See table below for a list of available features
|Configures Storybook composition |
|Configures Storybook's logs in the browser terminal. Useful for debugging |
|Customize Storybook's Webpack setup |
|Customize Storybook's Vite setup when using the vite builder |
|Defines custom Storybook environment variables. |
|Optimizes Storybook's production build for performance by excluding specific features from the bundle. Useful when decreased build times are a priority. |
Additionally, you can also provide additional feature flags to your Storybook configuration. Below is an abridged list of available features that are currently available.
|Configures Storybook to load stories on demand, rather than during boot up (defaults to |
|Enables support for MDX version 1 as a fallback. Requires |
By default, Storybook will load stories from your project based on a glob (pattern matching string) in
.storybook/main.js|ts that matches all files in your project with extension
.stories.*. The intention is for you to colocate a story file along with the component it documents.
If you want to use a different naming convention, you can alter the glob using the syntax supported by picomatch.
For example, if you wanted to pull both
.js files from the
my-project/src/components directory, you could write:
Additionally, you can customize your Storybook configuration to load your stories based on a configuration object. For example, if you wanted to load your stories from a
packages/components directory, you could adjust your
stories configuration field into the following:
When Storybook starts, it will look for any file containing the
stories extension inside the
packages/components directory and generate the titles for your stories.
You can also simplify your Storybook configuration and load the stories using a directory. For example, if you want to load all the stories inside a
packages/MyStories, you can adjust the configuration as such:
You can also adjust your Storybook configuration and implement custom logic to load your stories. For example, suppose you were working on a project that includes a particular pattern that the conventional ways of loading stories could not solve. In that case, you could adjust your configuration as follows:
As your Storybook grows, it gets challenging to load all of your stories performantly, slowing down the loading times and yielding a large bundle. Out of the box, Storybook loads your stories on demand rather than during boot-up to improve the performance of your Storybook. If you need to load all of your stories during boot-up, you can disable this feature by setting the
storyStoreV7 feature flag to
false in your configuration as follows:
Because of the way stories are currently indexed in Storybook, loading stories on demand with
storyStoreV7 has a couple of minor limitations at the moment:
- CSF formats from version 1 to version 3 are supported. The
storiesOfconstruct is not.
storySortfunctions are allowed based on a restricted API.
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 UI, 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 to order your stories, read about sorting stories.
To control the behavior of Storybook’s UI (the “manager”), you can create a