Storybook for React with Vite

Storybook for React & Vite is a framework that makes it easy to develop and test UI components in isolation for React applications built with Vite.

Install

To install Storybook in an existing React project, run this command in your project's root directory:

npm create storybook@latest

You can then get started writing stories, running tests and documenting your components. For more control over the installation process, refer to the installation guide.

Run Storybook

To run Storybook for a particular project, run the following:

npm run storybook

To build Storybook, run:

npm run build-storybook

You will find the output in the configured outputDir (default is storybook-static).

Storybook 11 reads React component props on the server by default, with the typescript package (TypeScript 5.9 or 6, even in JavaScript projects, where it reads types from JSDoc comments). New projects need no docgen configuration and no extra packages.

The Storybook 10 builder-based docgen is still available, but it is deprecated. It will be removed in Storybook 12. To use it:

Set features.docgenServer: false in your main config.
Set the package you want to use in typescript.reactDocgen. The default is 'react-docgen'.
Install the packages for that mode in your devDependencies:

`typescript.reactDocgen`	Packages to install
`'react-docgen'` (default)	`react-docgen`
`'react-docgen-typescript'`	`@joshwooding/vite-plugin-react-docgen-typescript` and `react-docgen-typescript`

When a docgen package is missing, Storybook stops and prints the install command. To run without docgen instead, set typescript.reactDocgen: false.

Projects on TypeScript 7.0 cannot use server-side docgen yet. See TypeScript 7.

FAQ

How do I migrate from the React Webpack framework?

The upgrade command should prompt you to migrate to @storybook/react-vite when you run it:

npx storybook@latest upgrade

In case that auto-migration does not work for your project, refer to the manual installation instructions below.

How do I manually install the React framework?

First, install the framework:

npm install --save-dev @storybook/react-vite

Then, update your .storybook/main.js|ts to change the framework property:

.storybook/main.ts

// 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: '@storybook/react-webpack5', 👈 Remove this
  framework: '@storybook/react-vite', // 👈 Add this
});

API

Options

You can pass an options object for additional configuration if needed:

.storybook/main.ts

// 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/react-vite',
    options: {
      // ...
    },
  },
});

`builder`

Type: Record<string, any>

Configure options for the framework's builder. For this framework, available options can be found in the Vite builder docs.