How to Configure Storybook for Different Frameworks: React, Vue, Angular, and Svelte

To configure Storybook for React, Vue, Angular, or Svelte, set the mandatory framework field in .storybook/main.js to the specific framework package (e.g., @storybook/react-vite, @storybook/angular), which automatically loads the correct builder, preset, and renderer.

Storybook's architecture separates framework-specific logic from the core runtime, requiring you to explicitly declare your UI framework in the configuration. According to the storybookjs/storybook source code, each supported framework lives in its own package under code/frameworks/ and must be specified via the framework field in .storybook/main.js to configure Storybook for different frameworks correctly.

Understanding Storybook's Framework Architecture

Storybook organizes framework support into discrete packages located in code/frameworks/. Each package bundles three critical components:

• Preset: Configures the builder and framework-specific settings
• Builder: Compiles your code (Vite for most frameworks, Webpack 5 for Angular)
• Renderer: Renders component stories in the correct environment

As noted in the MIGRATION.md file, the framework field in your .storybook/main.js config is now required. This field tells Storybook which preset to load, eliminating manual builder configuration.

Configuring Storybook for React

React with Vite

React projects use the @storybook/react-vite package. This preset automatically configures Vite with the React plugin and registers the React renderer.

Create or update .storybook/main.js:

module.exports = {
  // Mandatory framework field
  framework: '@storybook/react-vite',
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: ['@storybook/addon-essentials'],
};

The React framework implementation lives in code/frameworks/react-vite/, with detailed documentation in the React framework README.

Configuring Storybook for Vue 3

Vue 3 with Vite

Vue 3 projects use the @storybook/vue3-vite package. The preset adds Vue 3 support to Vite and registers the Vue renderer.

Configure .storybook/main.js:

module.exports = {
  framework: '@storybook/vue3-vite',
  stories: ['../src/**/*.stories.@(js|ts|vue|mdx)'],
  addons: ['@storybook/addon-essentials'],
};

The Vue 3 framework source resides in code/frameworks/vue3-vite/, documented in the Vue 3 framework README.

Configuring Storybook for Angular

Angular uses the @storybook/angular package, which differs from React and Vue because it currently ships only a Webpack 5 builder rather than Vite.

Configure .storybook/main.js:

module.exports = {
  framework: '@storybook/angular',
  stories: ['../src/**/*.stories.@(js|ts)'],
  addons: ['@storybook/addon-essentials'],
};

The Angular preset configures Angular's compiler and AOT (Ahead-of-Time) compilation via Webpack. The framework code lives in code/frameworks/angular/, with full details in the Angular framework README.

Configuring Storybook for Svelte

Svelte projects use the @storybook/svelte-vite package. The preset configures Vite for Svelte and registers the Svelte renderer.

Configure .storybook/main.js:

module.exports = {
  framework: '@storybook/svelte-vite',
  stories: ['../src/**/*.stories.@(js|ts|svelte|mdx)'],
  addons: ['@storybook/addon-essentials'],
};

The Svelte framework implementation is located in code/frameworks/svelte-vite/, documented in the Svelte framework README.

The Mandatory Framework Field

The framework field is not optional. As stated in the MIGRATION.md migration guide, this field is now required in your .storybook/main.js configuration.

When you specify the framework, Storybook automatically:

1. Loads the preset from the specified package (e.g., @storybook/react-vite)
2. Wires up the builder (Vite for most frameworks, Webpack 5 for Angular)
3. Registers the renderer so stories render in the correct framework environment

You can see this pattern in the mock configuration data at code/core/src/core-server/utils/__mockdata__/main.js, which uses @storybook/react-vite as the default framework value in test scenarios.

Summary

• Framework packages live in code/frameworks/ and bundle presets, builders, and renderers for each UI framework.
• Mandatory configuration: You must set the framework field in .storybook/main.js to your specific framework package (e.g., @storybook/react-vite, @storybook/angular).
• Builder differences: React, Vue 3, and Svelte use Vite by default, while Angular currently uses Webpack 5.
• Automatic wiring: Once the framework field is set, Storybook automatically loads the correct preset, configures the builder, and registers the renderer without additional manual setup.

Frequently Asked Questions

What is the mandatory framework field in Storybook?

The framework field is a required configuration option in .storybook/main.js that specifies which UI framework package Storybook should use. According to the MIGRATION.md guide, this field tells Storybook to load the correct preset, builder, and renderer for your specific framework, eliminating the need for manual builder configuration.

Can I use Webpack instead of Vite with React or Vue?

While the standard framework packages (@storybook/react-vite, @storybook/vue3-vite) use Vite by default, Storybook's architecture supports different builders. However, for React and Vue, the Vite-based packages are the recommended and maintained options in the current next branch. Angular currently ships only with a Webpack 5 builder via @storybook/angular.

Why does Angular use a different builder than React and Vue?

Angular relies on its own compiler and Ahead-of-Time (AOT) compilation system, which requires specific Webpack configurations that differ from the standard Vite setup used by React, Vue 3, and Svelte. The @storybook/angular package in code/frameworks/angular/ is specifically designed to integrate with Angular's build tooling via Webpack 5.

Where are the framework packages located in the Storybook source code?

All framework-specific packages reside in the code/frameworks/ directory of the storybookjs/storybook repository. Each framework has its own subdirectory (e.g., react-vite/, vue3-vite/, angular/, svelte-vite/) containing the preset, builder configuration, and renderer registration for that specific UI framework.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}