用于构建交互式用户界面的 JavaScript 库,基于可组合的组件开发。
storybookjs/storybook
用于独立开发、文档化和测试 UI 组件的前端工作台,支持 React、Vue、Angular 等框架。
- Star
- 91,336
- Fork
- 10,472
- 未关闭 Issue
- 1,867
- 最近提交
- 3小时前
这是什么?
Storybook 是一个前端工作台,开发者可以在主应用之外单独构建和展示 UI 组件与页面。每个组件都在隔离的沙箱视图中渲染,无需启动完整应用或手动调出各种状态,便于开发、审查和编写文档。
它支持 React、Angular、Vue 3、Svelte、Web Components、HTML、Preact、Ember、SolidJS 等多种渲染器,React Native 以及 Android、iOS、Flutter 则由独立项目提供。通过插件(addons)可以扩展无障碍检查、交互测试、背景与视口切换、布局检查和自动生成文档等功能。
项目采用 monorepo 结构,由 Storybook 团队维护,并公开了贡献指南和社区交流渠道。
核心功能
- 01在隔离环境中渲染 React、Vue、Angular、Svelte 等框架的组件。
- 02提供无障碍检测、视口切换和布局检查等插件。
- 03基于 story 自动生成组件文档。
- 04支持在 story 中进行交互测试。
- 05通过插件 API 支持自定义扩展。
适用场景
- 在不启动完整应用的情况下开发和审查设计系统组件。
- 为设计师和开发者整理 UI 组件的各种变体文档。
- 测试加载中、错误、空数据等组件状态。
- 在开发阶段检查组件的无障碍支持情况。
快速上手
- 1
访问 Storybook 官网开始使用(README 中没有安装命令)
- 2
使用 storybook.new 在 StackBlitz 中创建示例项目
标签
常见问题
- storybook 是什么?
- 用于独立开发、文档化和测试 UI 组件的前端工作台,支持 React、Vue、Angular 等框架。 Storybook 是一个前端工作台,开发者可以在主应用之外单独构建和展示 UI 组件与页面。每个组件都在隔离的沙箱视图中渲染,无需启动完整应用或手动调出各种状态,便于开发、审查和编写文档。
- storybook 可以免费使用吗?用的什么许可证?
- storybook 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
- storybook 还在维护吗?
- 活跃维护中。storybook 最近一次提交是在 2026年10月21日。
- storybook 适合用来做什么?
- 在不启动完整应用的情况下开发和审查设计系统组件。 为设计师和开发者整理 UI 组件的各种变体文档。 测试加载中、错误、空数据等组件状态。 在开发阶段检查组件的无障碍支持情况。
- storybook 怎么安装和运行?
- 访问 Storybook 官网开始使用(README 中没有安装命令) 使用 storybook.new 在 StackBlitz 中创建示例项目
- 在哪里获取 storybook?
- 源代码和安装说明在 GitHub 上:https://github.com/storybookjs/storybook
概要由 AI 根据项目 README 生成;GitHub 数据每日更新。
相关项目
25.2万5.2万JavaScriptMIT更新于 8小时前
用一套类 JSX 语法编写组件,编译为 React、Vue、Angular、Svelte、Solid、Qwik 等多种框架代码。
1.4万679TypeScriptMIT更新于 22天前
基于 Radix UI 与 Tailwind CSS 的可复制粘贴 React 组件集,代码归你所有,可随意定制。
12.6万1.3万TypeScriptMIT更新于 8小时前
面向企业应用的 React 组件库与设计语言,适用于构建 Web 应用界面。
10万5.5万TypeScriptMIT更新于 4小时前
一套免费、MIT 许可的 6200 多个 SVG 图标,提供 React、Vue、Svelte 等多框架组件包。
2.2万1245JavaScriptMIT更新于 4小时前
Builder.io 可视化开发平台的开源monorepo,包含多框架 SDK、示例与starter项目。
88661169TypeScriptMIT更新于 6天前