framework

(Required)

Parent: main.js|ts configuration

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

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

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/your-framework',
    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.