Web Components

Storybook for Web Components & Rsbuild is tailored for Lit and custom-element projects, giving you fast component previews without leaving your Rsbuild workflow.

Requirements

Package	Version
`lit`	≥ 2 (or ≥ 3)
`@rsbuild/core`	`^1.5.0 \|\| ^2.0.0-0`
`storybook`	`^10.6.0`

Getting started

Run through these steps inside an Rsbuild project that renders Web Components.

Installation

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

npm

yarn

pnpm

bun

deno

npm install @rsbuild/core storybook-web-components-rsbuild -D

Configure `.storybook/main.ts`

import { StorybookConfig } from 'storybook-web-components-rsbuild'
import { mergeRsbuildConfig } from '@rsbuild/core'

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

export default config

You're good to go! See the web components sandbox for a complete reference and browse the Storybook docs for deeper guidance.

Next Steps

Writing Stories: Learn the basics of CSF for Web Components.
Lit Snippets: Examples using Lit and generic Web Components.

Options

Please refer to the Configuration Guide for framework-specific options and defaults.

#Web Components

#Requirements

#Getting started

#Installation

#Configure .storybook/main.ts

#Next Steps