Repolode
storybookjs

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. 1

    访问 Storybook 官网开始使用(README 中没有安装命令)

  2. 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 数据每日更新。

相关项目