main-config-stories.mdx

title	sidebar
stories	order title 3 stories

(Required)

Parent: main.js|ts configuration

Type:

| (string | StoriesSpecifier)[]
| async (list: (string | StoriesSpecifier)[]) => (string | StoriesSpecifier)[]

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:

•
└── components
    ├── Button.ts
    └── Button.stories.ts

{/* prettier-ignore-start */}

{/* prettier-ignore-end */}

If you want to use a different naming convention, you can alter the glob using the syntax supported by [picomatch](https://github.com/micromatch/picomatch#globbing-features).

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:

{/* prettier-ignore-start */}

{/* prettier-ignore-end */}

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:

{/* prettier-ignore-start */}

{/* prettier-ignore-end */}

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.

StoriesSpecifier

Type:

{
  directory: string;
  files?: string;
  titlePrefix?: string;
}

StoriesSpecifier.directory

(Required)

Type: string

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

StoriesSpecifier.files

Type: string

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

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

StoriesSpecifier.titlePrefix

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:

{/* prettier-ignore-start */}

{/* prettier-ignore-end */}