storybook
Use when setting up Storybook, writing component stories, configuring the Vitest addon for testing, or using CSF Factories for TypeScript-first stories. Also use for interaction testing, module mocking, accessibility testing in stories, and visual testing integration.
| Model | Source |
|---|---|
| sonnet | pack: frontend |
Full Reference
ββ π§ storybook ββββββββββββββββββββββββββββββββββ β Use when setting up Storybook, writing componeβ¦ β ββββββββββββββββββββββββββββββββββββββββββββββββββ
Storybook 10.x
Section titled βStorybook 10.xβESM-only component workshop. Node 20.16+, 22.19+, or 24+ required. Install is 29% smaller; dist code ships unminified for easier debugging.
Version: 10.2.x (released October 2025)
Quick Reference
Section titled βQuick Referenceβ| Item | Value |
|---|---|
| Version | 10.2.x |
| Init (any framework) | npx storybook@latest init |
| Docs | https://storybook.js.org/docs |
| Test command | vitest --project=storybook |
| CSF format | CSF3 (standard) or CSF Factories (preview, SB10+) |
| Config dir | .storybook/ |
| Main config | .storybook/main.ts (must be valid ESM) |
| Node requirement | 20.16+, 22.19+, or 24+ |
Reference Index
Section titled βReference Indexβ| Topic | File | Whatβs inside |
|---|---|---|
| Setup & init | reference/setup.md | Per-framework init, main.ts, preview.ts, ESM requirements, Node version |
| Writing stories | reference/stories.md | CSF3 standard format, CSF Factories, decision table |
| Vitest addon | reference/vitest-addon.md | Install, vitest.setup.ts, vitest.config.ts, scripts, migration from test-runner |
| Interaction testing | reference/interaction-testing.md | play functions, @storybook/test exports, userEvent patterns, async assertions |
| Module mocking | reference/module-mocking.md | sb.mock() setup, three mock modes, beforeEach per-story overrides, mocks pattern |
| Accessibility | reference/accessibility.md | addon-a11y setup, per-story config, toHaveNoViolations, CSF Factories integration |
| Visual testing | reference/visual-testing.md | Chromatic setup + pricing, Playwright screenshot integration |
| CI | reference/ci.md | GitHub Actions build + test workflow, Chromatic CI action |
Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.