组件百科全书抢先看

越来越多的团队正在构建组件驱动的 UI。但每个团队都是不同的，他们选择的工具和工作流程也不同。要弄清楚如何构建具有可访问性、可主题化、响应式等特性的复杂 UI 并不容易。

你可能读过无数的“最佳实践”，但它们往往只是某个人的观点。找出真正有效的方法最快的方式是看看你的同行是怎么做的。这意味着观察他们的 UI 开发技巧，并将其应用到你自己的工作中。

我很高兴分享组件百科全书的抢先看。我们搜遍了网络，收集了来自 Adobe、Mozilla、GitHub、Wordpress 等公司经过实践检验的 UI 组件。然后我们将它们汇集在一个地方，供你在构建自己的项目时参考。

🌎 浏览网页上的 UI 组件
🔍 按框架 + CSS 库搜索组件
▶️ 体验实时实现（无需代码）
🗺 查看源代码，了解组件的工作原理
♻️ 在你的项目中复用组件

等等，这是为什么？

成千上万的团队每天都使用 Storybook 为数百万人构建组件。但 Storybook 本身并非灵丹妙药——它是一个帮助你构建、测试和文档化 UI 组件的工具集合。

即使拥有世界上所有的工具，顶尖团队创建的 UI 与像你我这样的独立开发者创建的 UI 之间仍然存在差距。

大多数关于 UI 工程的资源都是入门级的。它们提供了对该领域的广泛概述，但没有涵盖组件构建的具体细节。如果你想学习团队用来构建 UI 组件的技术，你必须去 GitHub 上寻找。

幸运的是，随着 Storybook 的广泛采用，我们处于一个理想的位置来展示顶级的 UI 组件供你参考和复用。这就是为什么我们正在构建首个 UI 组件百科全书。

有一个组件可以解决

组件百科全书是一个可视化展示平台，展示了来自公共 Storybook 的 UI 组件，你可以在项目中浏览、参考和复用它们。你可以看到并与真实的组件进行交互。无需再深入代码或从静态图像猜测组件的用户体验。

看看 Twilio 的设计系统。复用来自 Airbnb 的日期组件。探索 GitLab 如何构建他们的 UI。

可视化浏览

获取热门组件库、设计系统和应用的可视化概览。按标签浏览，查看使用特定技术（如 React、Vue、Emotion 和 Sass）的所有组件。或者浏览我们团队精心挑选的一组新颖组件。

交叉引用组件

组件词汇表列出了网络上最常见的组件类型。了解每种组件类型的定义、如何使用以及一组规范示例。

搜索所有内容

我们扫描提交到百科全书的项目，为每个组件建立索引。每个项目的元数据按标签组织，然后根据维护、流行度和下载量等启发式指标进行排名。

交互式故事，用于实时演示

与实时组件故事进行交互，就像在自己的机器上运行代码一样。跳转到 Storybook 查看完整的组件开发环境，包括文档和插件。

在百科全书中展示你的项目

我们的目标是将网络上最好的组件收集到一个地方，供你在构建自己的 UI 时用作资源。但不可能知道每个 Storybook 都发布在哪里。

这就是为什么我们需要你的帮助来向百科全书添加项目。请这里提交你最喜欢的已发布的 Storybook 的 URL。

注册抢先体验

组件百科全书是一项正在积极开发中的巨大工程。我们需要你的帮助和反馈来使其成为现实，尤其是在抢先体验阶段。请在下方注册 Storybook 的邮件列表，以获取项目更新通知。

加入我们在 Storybook 的Discord 聊天频道 #showcase。我们欢迎新开发者和资深开发者的贡献，特别是在增加索引方面。

组件百科全书由 Kyle Gach、Amber Smith、Kevin Killingsworth、Tom Coleman 和 Dominic Nguyen（也就是我！）开发，并得到了整个 Storybook 社区的反馈。特别感谢 Iain Bean 提供的早期指导。