Main configuration

The main configuration defines a Storybook project's behavior, including the location of stories, addons to use, feature flags, and other project-specific settings.

The main configuration file: main.js or main.ts

<Callout variant="warning">

This file must be valid ESM. In other words, it must use import instead of require, and neither __dirname nor __filename are available.

</Callout>

This configuration is defined in .storybook/main.js|ts, which is located relative to the root of your project.

A typical Storybook configuration file looks like this:

<CodeSnippets path="main-config-typical.md" />

config

An object to configure Storybook containing the following properties:

• framework (Required)
• stories (Required)
• addons
• babel
• babelDefault
• build
• core
• docs
• env
• features
• indexers (⚠️ Experimental)
• logLevel
• managerHead
• previewAnnotations
• previewBody
• previewHead
• refs
• staticDirs
• swc
• tags
• typescript
• viteFinal
• webpackFinal