> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# React

Storybook for React & Rsbuild lets you develop and test React components in isolation using the Rsbuild toolchain your app already relies on.

## Requirements


| Package | Version |
| --- | --- |
| `react` | ≥ 16.8 |
| `@rsbuild/core` | `^1.5.0 \|\| ^2.0.0-0` |
| `storybook` | `^10.6.0` |


## Getting started

Follow these steps inside an existing Rsbuild-powered React project.

### Installation

Install the framework package and `@rsbuild/core`. Even though `storybook-react-rsbuild` declares `@rsbuild/core` as a peer, list it as a direct dev dependency so version pins and lockfile audits remain unambiguous.


```sh [npm]
npm install @rsbuild/core storybook-react-rsbuild -D
```

```sh [yarn]
yarn add @rsbuild/core storybook-react-rsbuild -D
```

```sh [pnpm]
pnpm add @rsbuild/core storybook-react-rsbuild -D
```

```sh [bun]
bun add @rsbuild/core storybook-react-rsbuild -D
```

```sh [deno]
deno add npm:@rsbuild/core npm:storybook-react-rsbuild -D
```

### Configure `.storybook/main.ts`

```js
import { StorybookConfig } from 'storybook-react-rsbuild'
import { mergeRsbuildConfig } from '@rsbuild/core'

const config: StorybookConfig = {
  framework: 'storybook-react-rsbuild',
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  rsbuildFinal: (config) => {
    // Customize the final Rsbuild config here
    return mergeRsbuildConfig(config, {
      // your custom config
    })
  },
}

export default config
```

That's it! Explore the [React 16](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/react-16) and [React 18](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/react-18) sandboxes for full examples, and continue learning from the [Storybook documentation](https://storybook.js.org/docs).

## Next Steps

Now that you've set up the build system, learn how to write stories and document your components:

- **[Writing Stories](https://storybook.js.org/docs/writing-stories)**: Learn the basics of Component Story Format (CSF).
- **[Auto-docs](https://storybook.js.org/docs/writing-docs/autodocs)**: Automatically generate documentation from your components.

## Options

Please refer to the [Configuration Guide](/guide/configuration.md#framework-options) for framework-specific options and defaults.