# Storybook — UI Component Workshop for Building & Testing

> Storybook is the industry-standard workshop for building, documenting, and testing UI components in isolation. Supports React, Vue, Svelte, Angular, and more — used by Airbnb, Shopify, GitHub, and thousands of teams.

## Install

Save as a script file and run:

## Quick Use

```bash
# Add to existing project
npx storybook@latest init
npm run storybook
```

Write a story:
```tsx
// Button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";

const meta: Meta<typeof Button> = {
  component: Button,
  args: { label: "Click me" },
};
export default meta;

export const Primary: StoryObj<typeof Button> = {
  args: { variant: "primary" },
};
```

## Intro

Storybook is the industry-standard UI workshop. Develop components in isolation, document them, and test them — all outside your main app. Trusted by Airbnb, Shopify, GitHub, Microsoft, Atlassian.

- **Repo**: https://github.com/storybookjs/storybook
- **Stars**: 89K+
- **Language**: TypeScript
- **License**: MIT

## 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

```bash
# 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

| Tool | Scope | Isolation | Docs |
|---|---|---|---|
| Storybook | UI workshop | Yes | MDX + auto |
| Ladle | Stories only | Yes | Basic |
| Histoire | Vue-first | Yes | Good |
| Docz | Docs | Partial | MDX |

## 常见问题 FAQ

**Q: 和单元测试冲突吗？**
A: 不。Storybook 做可视化+交互测试，Vitest/Jest 做逻辑单元测试。可组合（Storybook Test Runner + Playwright）。

**Q: 构建速度慢？**
A: 迁移到 Storybook 7+ 的 Vite builder 大幅提速。冷启动从分钟级降到秒级。

**Q: 生产会打包吗？**
A: 不会。Storybook 是 devDependency，只在开发和 CI 运行。

## 来源与致谢 Sources

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

---
Source: https://tokrepo.com/en/workflows/2f0df676-3567-11f1-9bc6-00163e2b0d79
Author: Script Depot