Guide
Storybook
Guide
Storybook

Web Components

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

Requirements
  • lit: >=2 || ≥ 3
  • @rsbuild/core ≥ 1.0.1
  • storybook ≥ 8.2.1

Getting started

Use with Web components in a existing Rsbuild project.

Installation

To use Web components with Storybook, you need to install the storybook-web-components-rsbuild package.

npm
yarn
pnpm
bun
npm install storybook-web-components-rsbuild -D

Setup .storybook/main.ts

import { StorybookConfig } from 'storybook-web-components-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-web-components-rsbuild',
  rsbuildFinal: (config) => {
    // Customize the final Rsbuild config here
    return config
  },
}

export default config

You're all set now. You could also check out the example in sandboxes/web-components and use all other features listed in Storybook site.