Storybook for React with Webpack

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

<Callout variant="info">

We recommend using @storybook/react-vite for most React projects. The Vite-based framework is faster, more modern, and offers better support for testing features.

Use this Webpack-based framework (@storybook/react-webpack5) only if you need specific Webpack features not available in Vite. </Callout>

Install

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

<CodeSnippets path="create-command.md" variant="new-users" copyEvent="CreateCommandCopy" />

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.

Requirements

<GetStartedVersions versions={[{ name: 'React', range: '≥ 16.8', icon: '/images/logos/renderers/logo-react.svg' }, { name: 'Webpack', range: '5', icon: '/images/logos/builders/webpack.svg' }]} />

Run Storybook

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

<CodeSnippets path="storybook-run-dev.md" />

To build Storybook, run:

<CodeSnippets path="build-storybook-production-mode.md" />

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

Configure

Create React App (CRA)

Support for Create React App is handled by @storybook/preset-create-react-app.

This preset enables support for all CRA features, including Sass/SCSS and TypeScript.

Manually initialized apps

If you're working on an app that was initialized manually (i.e., without the use of CRA), ensure that your app has react-dom included as a dependency. Failing to do so can lead to unforeseen issues with Storybook and your project.

FAQ

How do I manually install the React Webpack framework?

First, install the framework:

<CodeSnippets path="react-webpack5-install.md" />

Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel:

<Callout variant="info"> If your project is using [Create React App](#create-react-app-cra), you can skip this step. </Callout> <CodeSnippets path="storybook-addon-compiler-swc-auto-install.md" />

or

<CodeSnippets path="storybook-addon-compiler-babel-auto-install.md" />

More details can be found in the Webpack builder docs.

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

<CodeSnippets path="react-webpack5-add-framework.md" />

How do I migrate to the React Vite framework?

Please refer to the migration instructions for @storybook/react-vite.

API

Options

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

<CodeSnippets path="react-webpack5-framework-options.md" />

builder

Type: Record<string, any>

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