Storybook is configured via a folder called.storybook, which contains various configuration files.

Configure your Storybook project

Storybook's main configuration (i.e., themain.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.storybook folder in your project's root directory. You can author this file in either JavaScript orTypeScript. Listed below are the available options and examples of how to use them.

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.import type { StorybookConfig } from '@storybook/your-framework';const config: StorybookConfig = {  // Required  framework: '@storybook/your-framework',  stories: ['../src/**/*.mdx','../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],  // Optional  addons: ['@storybook/addon-docs'],  docs: {    defaultName: 'Documentation',  },  staticDirs: ['../public'],};export default config;

Configure story loading

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.

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

If you want to use a different naming convention, you can alter the glob using the syntax supported bypicomatch.

For example, if you wanted to pull both.md and.js files from themy-project/src/components directory, you could write:

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.import type { StorybookConfig } from '@storybook/your-framework';const config: StorybookConfig = {  framework: '@storybook/your-framework',  stories: ['../my-project/src/components/*.@(js|md)'],};export default config;

With a configuration object

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 apackages/components directory, you could adjust yourstories configuration field into the following:

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.import type { StorybookConfig } from '@storybook/your-framework';const config: StorybookConfig = {  framework: '@storybook/your-framework',  stories: [    {      // 👇 Sets the directory containing your stories      directory: '../packages/components',      // 👇 Storybook will load all files that match this glob      files: '*.stories.*',      // 👇 Used when generating automatic titles for your stories      titlePrefix: 'MyComponents',    },  ],};export default config;

When Storybook starts, it will look for any file containing thestories extension inside thepackages/components directory and generate the titles for your stories.

With a directory

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 apackages/MyStories, you can adjust the configuration as such:

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.import type { StorybookConfig } from '@storybook/your-framework';const config: StorybookConfig = {  framework: '@storybook/your-framework',  // 👇 Storybook will load all existing stories within the MyStories folder  stories: ['../packages/MyStories'],};export default config;

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:

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.import type { StorybookConfig } from '@storybook/your-framework';import type { StoriesEntry } from 'storybook/internal/types';async function findStories(): Promise<StoriesEntry[]>{  // your custom logic returns a list of files}const config: StorybookConfig = {  framework: '@storybook/your-framework',  stories: async (list: StoriesEntry[]) => [    ...list,    // 👇 Add your found stories to the existing list of story files    ...(await findStories()),  ],};export default config;

Known limitations

Because of the way stories are currently indexed in Storybook, loading stories on demand has a couple of minor limitations at the moment:

• CSF formats from version 1 to version 3 are supported.
• CustomstorySort functions are allowed based on a restricted API.

Configure story rendering

To control the way stories are rendered and add globaldecorators andparameters, create a.storybook/preview.js file. This is loaded in the Canvas UI, the “preview” iframe that renders your components in isolation. Usepreview.js for global code (such asCSS imports or JavaScript mocks) that applies to all stories.

Thepreview.js file can be an ES module and export the following keys:

• decorators - an array of globaldecorators
• parameters - an object of globalparameters
• globalTypes - definition ofglobalTypes

If you’re looking to change how to order your stories, read aboutsorting stories.

Configure Storybook’s UI

To control the behavior of Storybook’s UI (the“manager”), you can create a.storybook/manager.js file.

This file does not have a specific API but is the place to setUI options and to configure Storybook’stheme.