close

    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

    PackageVersion
    lit≥ 2 (or ≥ 3)
    @rsbuild/core≥ 1.0.1
    storybook≥ 10.0.0

    Getting started

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

    Installation

    Install the Web Components framework package.

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

    Configure .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 good to go! See the web components sandbox for a complete reference and browse the Storybook docs for deeper guidance.

    Next Steps

    Options

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