> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt. # Getting started ![Storybook Rsbuild](https://github.com/rstackjs/storybook-rsbuild/assets/7237365/00165054-9e3e-4a15-8a99-27985989b9d2) [![latest version](https://img.shields.io/npm/v/storybook-builder-rsbuild?style=flat-square&color=ff4785)](https://www.npmjs.com/package/storybook-builder-rsbuild)[![NPM downloads per month](https://img.shields.io/npm/dm/storybook-builder-rsbuild?style=flat-square&color=%23ff4785)](https://npmcharts.com/compare/storybook-builder-rsbuild,storybook-react-rsbuild,storybook-react-vue,storybook-vue3-rsbuild,storybook-vue3-rsbuild?interval=7&log=false)[![license](https://img.shields.io/npm/l/storybook-builder-rsbuild?style=flat-square&color=%23ff4785)](https://github.com/rstackjs/storybook-rsbuild/blob/main/LICENSE) :::info Storybook versions The `main` branch ships the Storybook v10 Rsbuild builder together with each framework integration. Use the table below to match your Storybook version, and review the [official migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-9x-to-1000) before moving to v10. | Storybook | Storybook Rsbuild | | --------- | --------------------------------------------------------------- | | v10 | [^3.0.0](https://github.com/rstackjs/storybook-rsbuild) | | v9 | [^2.0.0](https://github.com/rstackjs/storybook-rsbuild/tree/v2) | | v8 | [^1.0.0](https://github.com/rstackjs/storybook-rsbuild/tree/v1) | ::: Storybook Rsbuild allows you to use [Rsbuild](https://rsbuild.rs) as the build engine for Storybook, providing faster startup and build times. :::tip Using an AI coding agent? If you use [Claude Code](https://code.claude.com), [Codex](https://openai.com/codex), [OpenCode](https://opencode.ai), or other AI coding agents, install our agent skills for guided setup and migration: ```sh [npx] npx skills add rstackjs/agent-skills --skill storybook-rsbuild ``` ```sh [yarn] yarn dlx skills add rstackjs/agent-skills --skill storybook-rsbuild ``` ```sh [pnpm] pnpm dlx skills add rstackjs/agent-skills --skill storybook-rsbuild ``` ```sh [bunx] bunx skills add rstackjs/agent-skills --skill storybook-rsbuild ``` ```sh [deno] deno run -A npm:skills add rstackjs/agent-skills --skill storybook-rsbuild ``` The skills teach your agent how to configure `rsbuildFinal`, set up framework integrations, and migrate from webpack/Vite. ::: ## Quick Start The fastest way to get started is using the Storybook CLI. ### New Project If you are setting up a new project, we recommend creating an Rsbuild project first, then adding Storybook. ```bash # 1. Create a new Rsbuild project npm create rsbuild@latest # 2. Initialize Storybook (in the project root) npx storybook@latest init ``` Storybook will detect Rsbuild and automatically configure `storybook-builder-rsbuild` for you. It will also add example stories to your project. To understand the generated files, check the [Storybook Project Structure](https://storybook.js.org/docs/configure/user-interface/sidebar-and-urls). ### Existing Project If you are migrating an existing Storybook project to Rsbuild, install the relevant framework package and update your `.storybook/main.ts`. :::tip Reuse your existing Rsbuild config If the project already has an `rsbuild.config.ts` in the directory where Storybook runs, Storybook Rsbuild detects and merges it into the preview build automatically. You do not need to duplicate its plugins or aliases in `rsbuildFinal`; for a config elsewhere, set the builder option `rsbuildConfigPath`. ::: See the **[Frameworks](/guide/framework/react.md)** section for detailed migration guides. ## Packages | Package | What it provides | | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | | [storybook-builder-rsbuild](https://github.com/rstackjs/storybook-rsbuild/tree/main/packages/builder-rsbuild) | The Rsbuild-powered Storybook builder | | [storybook-react-rsbuild](https://github.com/rstackjs/storybook-rsbuild/tree/main/packages/framework-react) | React framework integration configured for Rsbuild | | [storybook-vue3-rsbuild](https://github.com/rstackjs/storybook-rsbuild/tree/main/packages/framework-vue3) | Vue 3 framework integration configured for Rsbuild | | [storybook-html-rsbuild](https://github.com/rstackjs/storybook-rsbuild/tree/main/packages/framework-html) | Vanilla JavaScript/TypeScript integration | | [storybook-web-components-rsbuild](https://github.com/rstackjs/storybook-rsbuild/tree/main/packages/framework-web-components) | Lit and Web Components integration | | [storybook-addon-rslib](https://github.com/rstackjs/storybook-rsbuild/tree/main/packages/addon-rslib) | Addon that reuses Rslib configuration inside Storybook | | [storybook-addon-rstack](https://github.com/rstackjs/storybook-rsbuild/tree/main/packages/addon-rstack) | Addon that reuses Rstack configuration inside Storybook | | [storybook-addon-modernjs](https://github.com/rstackjs/storybook-rsbuild/tree/main/packages/addon-modernjs) | Addon that reuses Modern.js configuration inside Storybook | ## Usage :::info Peer dependency requirements **`@rsbuild/core`** `^1.5.0 || ^2.0.0-0` — Storybook Rsbuild requires the stable Rsbuild runtime. See the [1.0 release announcement](https://rsbuild.rs/community/releases/v1-0) for background. **`storybook`** `^10.6.0` — The range is pinned to the `storybook` peer of the bundled `@storybook/*` packages and is bumped alongside Storybook releases. Starting with v3.6.0, the minor version of Storybook Rsbuild tracks the Storybook minor it is built against: 3.6.x targets Storybook 10.6, 3.7.x will target Storybook 10.7, and so on. Upgrade guidance is available in the [Storybook release notes](https://storybook.js.org/blog/storybook-10/) . ::: When using the v8-compatible packages, you do not install `storybook-builder-rsbuild` directly. Framework packages such as `storybook-react-rsbuild` and `storybook-vue3-rsbuild` include it for you. Use the following framework guides to plug Storybook Rsbuild into your project. ## Use with frameworks ### React See [integrating with React](/guide/framework/react.md). ### Vue See [integrating with Vue](/guide/framework/vue.md). ### Vanilla JS/TS See [integrating with vanilla JavaScript / TypeScript](/guide/framework/vanilla.md). ### Web components See [integrating with web components (Lit)](/guide/framework/web-components.md). ## Integration ### With Modern.js Use your existing Modern.js configuration inside Storybook. See [integrating with Modern.js](/guide/integrations/modernjs.md). ### With Rslib Reuse your existing Rslib configuration inside Storybook. See [integrating with Rslib](/guide/integrations/rslib.md). ### With Rstack Reuse an app or library definition from your Rstack configuration inside Storybook. See [integrating with Rstack](/guide/integrations/rstack.md). ### With Rspack Connect Storybook Rsbuild to an existing Rspack setup. See [integrating with Rspack](/guide/integrations/rspack.md).