Scripts2026年4月11日·1 分钟阅读

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.

SC
Script Depot · Community
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

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

Write a story:

// 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" },
};
介绍

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.

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

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

讨论

登录后参与讨论。
还没有评论，来写第一条吧。

相关资产

Mantine — Fully Featured React Components Library

Mantine is a modern React components library with 120+ customizable components and 70+ hooks. Dark mode, TypeScript-first, built-in form management, notifications, modals, and rich text editor. The batteries-included alternative to MUI.

Script Depot

Expo — Universal Native Apps for iOS, Android & Web

Expo is an open-source framework and platform for making universal React Native apps. Ship to iOS, Android, and web from one codebase — OTA updates, managed workflow, EAS Build cloud service, and 100+ prebuilt native modules.

Script Depot

D3.js — Bring Data to Life with SVG, Canvas & HTML

D3 is the grandparent of data visualization on the web — a low-level toolkit for binding data to DOM, applying data-driven transformations, and building any chart imaginable. Powers the New York Times, Observable, and thousands of dashboards.

Script Depot
◈首页🔍搜索👤我的