组件百科全书

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

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

我很高兴推出组件百科全书。 我们在一个地方编录了世界顶级的 UI 组件，供你浏览、参考并在构建自己的项目时重复使用。 它收录了来自 Airbnb、Microsoft、Zendesk 和数十家其他公司的 5,132 个组件。

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

为什么要百科全书？

每天有数千个团队依赖 Storybook 来开发 UI 组件。 但 Storybook 的智能程度取决于使用它的人。 即使使用最先进的工具，在成熟的团队和像你我这样的普通开发人员之间仍然存在知识差距。

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

我们正在构建组件百科全书，以便开发人员可以参考来自最智能团队的经过实战检验的 UI 组件。 可以将其视为组件时代的“查看源代码”。 这可以帮助你研究如何在现实生活中解决 UI 工程挑战。

组件百科全书

组件百科全书是一个来自公共 Storybook 的 UI 组件的可视化展示。 每天有数千个团队依赖 Storybook。 GitHub 和欧盟使用它来跟踪其应用程序中无数的边缘案例。 像 Brex 和 Sourcegraph 这样的初创公司使用它来组装新功能，从而减少工作量。

今年早些时候，我们推出了beta 版组件百科全书。 无数社区贡献者将其项目提交到索引中。 但是随着越来越多的数据涌入，我们需要一种方法来组织所有数据。 今天的版本引入了多 facets 搜索、可浏览的标签、新的项目概览页面，甚至更多数据！

我们的数据始终在更新

随着 Storybook 的广泛采用，我们处于构建世界上最全面的 UI 组件数据库的完美位置。 到目前为止，索引中包含 5,132 个组件、14,949 个 stories 和 85 个项目。 每周都会添加新的公共项目或将其更新到最新版本。

搜索组件和项目

按组件或项目名称搜索。 我们的指导理念是突出你想要在项目中重复使用的最相关的组件。

​​每个组件的元数据都已标记，然后根据启发式方法（如维护、story 计数和下载量）进行排名。 按视图层（React、Vue、Angular）或 CSS 库（Emotion、CSS 模块、Sass）过滤结果，以查找与你的技术堆栈兼容的组件。

可视化浏览组件

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

这有助于你在决定进一步调查之前可视化组件的“本质”。 当你找到要检查的内容时，单击以在浏览器中演示它。  无需在你的机器上编译代码或浏览 GitHub 自述文件。

比较组件

组件百科全书按类型对组件进行分组。 每种类型都包括一个定义以及该组件在原位的一组规范示例。

你可以全面了解最常用的 UI 模式的现有技术。 按关键字浏览所有组件或浏览我们团队策划的精选组件。

下一步是什么

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

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

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

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