组件百科全书

如何同时构建可访问、响应式、高性能且多方面的 UI？网上有很多学习资源，但大多数都是针对初学者的。很少有资源考虑到真实团队的需求以及其中的权衡。

提升 UI 开发水平最快的方法是观察同行是怎么做的。这样你就可以在自己的项目中尝试他们的技巧。

我非常激动地宣布推出组件百科全书。我们将全球顶级的 UI 组件汇集一处，供你在构建自己的项目时浏览、参考和复用。它包含了来自 Airbnb、微软、Zendesk 等数十家公司的 5,132 个组件。

• 🌎 可视化浏览组件
• 🔍 搜索 5,132 个组件
• ▶️ 在浏览器中演示实时示例
• 🗺 查看源代码
• ♻️ 复用组件

为什么要建立一个百科全书？

数千个团队每天都依赖 Storybook 来开发 UI 组件。但 Storybook 的强大取决于使用它的人。即使拥有最先进的工具，经验丰富的团队和像你我这样的普通开发者之间仍然存在知识差距。

UI 有无数相互关联的需求——其中许多是你无法控制的（浏览器、网络连接、设备 API 等）。错误的标记或抽象可能会迫使你推翻一切重来。

我们正在构建组件百科全书，以便开发者可以参考来自最聪明团队的经过实战检验的 UI 组件。把它想象成组件时代的“查看源代码”。这可以帮助你研究 UI 工程难题在现实中是如何解决的。

组件百科全书

组件百科全书是一个展示公共 Storybook 中 UI 组件的可视化平台。每天有数千个团队依赖 Storybook。GitHub 和欧盟使用它来跟踪其应用程序中的无数边缘情况。像 Brex 和 Sourcegraph 这样的初创公司使用它来更轻松地组装新功能。

今年早些时候，我们发布了组件百科全书的测试版。无数社区贡献者将他们的项目提交到索引中。但随着越来越多的数据涌入，我们需要一种方式来组织所有这些数据。今天的版本引入了分面搜索、可浏览标签、新的项目概览页面，以及更多数据！

我们的数据持续更新

随着 Storybook 的广泛应用，我们处于构建全球最全面的 UI 组件数据库的绝佳位置。截至目前，索引中共有 5,132 个组件、14,949 个故事和 85 个项目。每周都会添加新的公共项目或更新到最新版本。

搜索组件和项目

按组件或项目名称搜索。我们的指导理念是突出显示您希望在项目中复用的最相关的组件。

​​每个组件的元数据都经过标记，然后根据维护情况、故事数和下载量等启发式方法进行排名。按视图层（React、Vue、Angular）或 CSS 库（Emotion、CSS modules、Sass）过滤结果，以找到与您的技术栈兼容的组件。

可视化浏览组件

组件封装了代码片段的可视化和功能方面。组件百科全书会为库、设计系统或应用程序中的每个组件拍摄参考图片。

这有助于您在深入研究之前直观地了解组件的“本质”。当您找到需要检查的内容时，单击即可在浏览器中演示。 无需在您的机器上编译代码或深入研究 GitHub readme。

比较组件

组件百科全书按类型对组件进行分组。每种类型都包含定义以及该组件在实际应用中的一组规范示例。

您可以全面了解最常用 UI 模式的现有成果。按关键词浏览所有组件，或快速浏览我们团队精选的特色组件。

下一步计划

在 Storybook，我们相信世界正朝着组件驱动的 UI 发展。我们的目标是通过帮助人们学习如何构建组件来加速行业向组件的转变。

我们从组件百科全书开始，它是一个面向所有前端开发者的综合参考点。我们需要你的帮助来添加更多项目、提出功能建议和报告问题。

• 浏览组件百科全书 »
• 在Discord #showcase » 与维护者聊天

本项目由Kyle Gach、Gert Hengeveld、Tom Coleman和Dominic Nguyen（我本人！）与整个 Storybook 社区的反馈共同完成。