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)
import { defineMain } from '@storybook/your-framework/node';
 
export default defineMain({
  framework: {
    name: '@storybook/your-framework',
    options: {},
  },
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
});

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.