构建、测试和文档化组件

Storybook 是一个前端工作区,用于隔离构建 UI 组件和页面。数千个团队使用它进行 UI 开发、测试和文档化。它是开源且免费的。

入门
v9
最新版本
38.37m
每月安装次数
2282
贡献者
开发
localhost:6006
VSCodeGithubAirbnbMozilla

构建耐用的用户界面

Storybook 提供了一个工作区,用于隔离构建 UI。它帮助您开发难以触及的状态和边缘情况,而无需运行整个应用程序。

隔离构建 UI 组件和页面

无需麻烦数据、API 或业务逻辑即可实现组件和页面。

为什么要隔离构建 UI?

将难以触及的边缘情况模拟为故事

在应用程序中难以重现的关键状态下渲染组件。然后将这些状态保存为故事,以便在开发、测试和 QA 期间重访。

如何编写故事

与您已使用的工具集成

Storybook 可渐进式采用,并与行业标准工具集成。这意味着您的团队不必更改工作流程。

浏览集成
400+
集成
3500万
每周下载量
ViteChromatic
Notion
TestingLib
Emotion
Tailwind
Jest
Nextjs
Webpack
Figma
ZeroheightNx
Apollo
Playwright
Axe
RedwoodJS
MSW
Zeplin
GraphQL
Gatsby
Launchdarkly
Sass
SWC
UXpinIonic
Sketch
Invision
Supernova
Cypress
Nuxt
“Storybook 是一个强大的前端工作区环境工具,它允许团队设计、构建和组织 UI 组件(甚至完整的屏幕!),而不会被业务逻辑和管道所困扰。”
Brad Frost
Brad Frost
《原子设计》作者

轻松测试 UI,无错误

故事捕捉 UI 组件的“已知良好”状态。它们是跟踪 UI 边缘情况的实用、可重现的方式。Storybook 使用它们来支持自动化测试。

“我们用于编辑 UI 的工具是 Storybook。它是确保您的工作在各个断点上都与设计像素级别匹配的完美场所。”
Adam Neary
Adam Neary
技术主管

为您的团队记录可重用 UI

Storybook 将 UI、示例和文档集中在一起。这有助于您的团队采用现有的 UI 模式。

“Storybook 通过允许我们在设计系统中轻松包含技术文档,使组件开发更加 streamlined!”
Taurie Davis
Taurie Davis
《构建设计系统》作者

分享 UI 的实际工作方式

故事展示了 UI 的实际工作方式,而不仅仅是它们应该如何工作的静态设计。这使得大家都能了解当前生产环境中的内容。

发布 Storybook 以获得队友的认可

将 Storybook 作为网站发布供利益相关者参考。您的团队可以在不接触代码的情况下检查 UI 是否看起来正确。

发布 Storybook
Storybook Mock UI
Player
Player
Player
Player

将故事嵌入到 wiki、Markdown 和 Figma 中

嵌入故事以向队友和开发者社区展示您的工作。与 oEmbed 标准兼容。

嵌入故事
Embed stories using iframes in your NextJS sites
等等...
“当我开始一个新的设计系统时,Storybook 是我的首选。它为设计和工程团队都提供了快速轻松的设置。”
Sarrah Vesselov
Sarrah Vesselov
《构建设计系统》作者
logo-cloudbees - Storybook 中文

自动化 UI 工作流

将 Storybook 添加为 CI 步骤,以自动化 UI 开发工作流。这有助于您和您的团队减少手动工作,更快地交付。

Automate

专为前端开发人员打造

顶尖的前端工程团队依靠 Storybook 来交付改变世界的产品。加入我们的开源社区,学习新技术并获得支持。

加入 2282 名贡献者,共同构建 UI 开发的未来。
在 GitHub 上 Star
2282
贡献者
与 19,793+ 位前端开发者在线交流。
加入 Discord 服务器
19,793+
服务器成员
观看教程、功能预览和访谈。
在 YouTube 上观看
8,320+
订阅者
BlueSky
X
获取来自 Storybook 维护者的最新新闻和更新。
24,200+
关注者