framework

(Required)

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;