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.

main.js or main.ts

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:

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

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
• typescript
• viteFinal
• webpackFinal