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

Keep in mind that some addons may assume Storybook's default naming convention. </Callout>

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.

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

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: