Docs
Storybook Docs

framework

(Required)

Parent: main.js|ts configuration

Type: FrameworkName | { name: FrameworkName; options?: FrameworkOptions }

Configures Storybook based on a set of framework-specific settings.

.storybook/main.ts
// Replace react-vite with the framework you are using (e.g., react-webpack5)
import type { StorybookConfig } from '@storybook/react-vite';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/react-vite',
    options: {
      legacyRootApi: true,
    },
  },
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
};
 
export default config;

name

Type: string

For available frameworks and their options, see their respective documentation.

options

Type: Record<string, any>

While many options are specific to a framework, there are some options that are shared across some frameworks, e.g. those that configure Storybook's builder.

options.builder

Type: Record<string, any>

Configures Storybook's builder, Vite or Webpack.

options.builder.useSWC

For frameworks made with Webpack builder, except Angular. Enabling this option allows you to use the SWC compiler instead of Babel.

When Storybook loads, it will update Webpack's configuration including the required loaders (e.g., TerserPlugin, babel-loader) with SWC equivalents (e.g., swc-loader) for bundling and minification.

.storybook/main.ts
// Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/your-framework',
    options: {
      builder: {
        useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6
      },
    },
  },
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
};
 
export default config;