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



Parent: main.js|ts configuration



Configures Storybook to load stories from the specified locations. 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.

Keep in mind that some addons may assume Storybook's default naming convention.

With an array of globs

Storybook will load stories from your project as found by this array of globs (pattern matching strings).

Stories are loaded in the order they are defined in the array. This allows you to control the order in which stories are displayed in the sidebar:

With a configuration object

Additionally, you can customize your Storybook configuration to load your stories based on a configuration object. This object is of the type StoriesSpecifier, defined below.

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.





Type: string

Where to start looking for story files, relative to the root of your project.


Type: string

Default: '**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))'

A glob, relative to (with no leading ./), that matches the filenames to load.


Type: string

Default: ''

When auto-titling, prefix used when generating the title for your stories.

With a custom implementation

💡 Storybook now statically analyzes the configuration file to improve performance. Loading stories with a custom implementation may de-optimize or break this ability.

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:

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,615 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI