Storybook — UI Component Workshop for Building & Testing

What Storybook Does

• Isolated development — components render without app shell
• Interactive docs — auto-generated from stories + MDX
• Visual testing — Chromatic integration for snapshots
• Accessibility — a11y addon flags WCAG issues
• Interaction tests — Testing Library inside stories
• Args/Controls — live-edit props in the UI
• Multi-framework — React, Vue, Svelte, Angular, Web Components, Solid

Architecture

Storybook runs as a dev server alongside your app. Each *.stories.tsx file exports stories that Storybook auto-discovers. Uses Vite or Webpack under the hood. Addons extend the UI panel (docs, a11y, viewport, theme, etc.).

Self-Hosting

# Build static site
npm run build-storybook
# Outputs storybook-static/

# Deploy anywhere: Netlify, Vercel, S3, GitHub Pages

Key Features

• Framework-agnostic (10+ frameworks)
• MDX documentation
• CSF 3 (Component Story Format)
• Controls/Actions addons
• Accessibility (a11y) addon
• Visual regression via Chromatic
• Interaction testing
• Theme switching
• Responsive viewport testing

Comparison

FAQ

Q: Does it conflict with unit testing? A: No. Storybook handles visual + interaction testing; Vitest/Jest handle logic unit tests. They compose well (Storybook Test Runner + Playwright).

Q: Slow build speed? A: Migrating to the Storybook 7+ Vite builder gives a huge speedup. Cold start drops from minutes to seconds.

Q: Does it get bundled into production? A: No. Storybook is a devDependency that only runs in development and CI.

Sources & Credits

• Docs: https://storybook.js.org
• GitHub: https://github.com/storybookjs/storybook
• License: MIT