Storybook

Overview

Storybook renders each UI component in isolation as a set of "stories" written in Component Story Format (CSF). Stories double as living documentation (autodocs), interaction tests (play functions), accessibility checks (axe-core) and visual regression baselines. The current major is 10 (checked at 10.6.3); it is ESM-only and the testing helpers moved from @storybook/test into the main package as storybook/test.

Instructions

Install

npm create storybook@latest          # detects the framework, installs addons, adds scripts
npm run storybook                    # dev server on http://localhost:6006
npm run build-storybook              # static build in storybook-static/

pnpm: pnpm create storybook@latest; yarn: yarn create storybook. Add addons later with npx storybook add @storybook/addon-a11y so the package and .storybook/main.ts stay in sync.

Write stories