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

> Configure Storybook for React Vue Angular or Svelte by setting the framework field in .storybookmainjs. Learn how to integrate Storybook with your favorite UI frameworks.

- Repository: [Storybook/storybook](https://github.com/storybookjs/storybook)
- Tags: how-to-guide
- Published: 2026-02-27

---

**To configure Storybook for React, Vue, Angular, or Svelte, set the mandatory `framework` field in [`.storybook/main.js`](https://github.com/storybookjs/storybook/blob/main/.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`](https://github.com/storybookjs/storybook/blob/main/.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`](https://github.com/storybookjs/storybook/blob/main/MIGRATION.md) file, the `framework` field in your [`.storybook/main.js`](https://github.com/storybookjs/storybook/blob/main/.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`](https://github.com/storybookjs/storybook/blob/main/.storybook/main.js):

```javascript
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](https://github.com/storybookjs/storybook/blob/next/code/frameworks/react-vite/README.md).

## 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`](https://github.com/storybookjs/storybook/blob/main/.storybook/main.js):

```javascript
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](https://github.com/storybookjs/storybook/blob/next/code/frameworks/vue3-vite/README.md).

## 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`](https://github.com/storybookjs/storybook/blob/main/.storybook/main.js):

```javascript
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](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/README.md).

## 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`](https://github.com/storybookjs/storybook/blob/main/.storybook/main.js):

```javascript
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](https://github.com/storybookjs/storybook/blob/next/code/frameworks/svelte-vite/README.md).

## The Mandatory Framework Field

The `framework` field is not optional. As stated in the [`MIGRATION.md`](https://github.com/storybookjs/storybook/blob/main/MIGRATION.md) migration guide, this field is now required in your [`.storybook/main.js`](https://github.com/storybookjs/storybook/blob/main/.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`](https://github.com/storybookjs/storybook/blob/main/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`](https://github.com/storybookjs/storybook/blob/main/.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`](https://github.com/storybookjs/storybook/blob/main/.storybook/main.js) that specifies which UI framework package Storybook should use. According to the [`MIGRATION.md`](https://github.com/storybookjs/storybook/blob/main/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.