组件百科全书抢先看

越来越多的团队正在构建 组件驱动的 UI。但每个团队都不同，他们选择的工具和工作流程也各不相同。构建可访问、可主题化、响应式以及更复杂的 UI 非常困难。

您可能已经阅读过无数的“最佳实践”，但这些都只是一些人的观点。找出真正有效的方法最快的方式是看看您的同行在做什么。这意味着观察他们的 UI 开发技术，并将其应用到您自己的工作中。

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

🌎 浏览网络上的 UI 组件
🔍 按框架 + CSS 库搜索组件
▶️ 体验在线演示（无需代码）
🗺 查看源代码，了解组件的工作原理
♻️ 在您的项目中重用组件

等等，为什么？

每天有数千个团队使用 Storybook 为数百万人构建组件。但 Storybook 本身并不是万能药 – 它是一系列工具，可以帮助您构建、测试和记录 UI 组件。

即使拥有世界上所有的工具，领先团队创建的 UI 与像您和我这样的个人开发者创建的 UI 之间仍然存在差距。

大多数 UI 工程资源都是入门级的。它们为您提供了该学科的广泛概述，但没有涵盖如何构建组件的具体细节。如果您想学习团队用于构建 UI 组件的技术，则必须去 GitHub 上搜索。

幸运的是，随着 Storybook 的广泛采用，我们处于理想的位置，可以展示顶级的 UI 组件供您参考和重用。这就是我们正在构建史上第一个 UI 组件百科全书的原因。

这里有组件

组件百科全书是一个可视化展示平台，展示来自公共 Storybook 的 UI 组件，您可以在其中浏览、参考并在您的项目重用它们。您可以查看并与真实的组件进行交互。不再需要深入研究代码或从静态图像猜测组件的 UX。

看看 Twilio 的设计系统。重用 Airbnb 的 Date 组件。探索 GitLab 构建 UI 的方式。

可视化浏览

获得流行的组件库、设计系统和应用程序的可视化概览。按标签浏览以查看所有使用给定技术的组件，例如 React、Vue、Emotion 和 Sass。或者浏览我们团队精心挑选的一组新颖组件。

交叉引用组件

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

搜索所有内容

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

用于在线演示的交互式故事

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

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

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

这就是为什么我们需要您的帮助将项目添加到百科全书。在此处提交您最喜欢的已发布的 Storybook 的 URL here。

注册以获得提前体验资格

组件百科全书是一项庞大的工程，目前正在积极开发中。我们需要您的帮助和反馈才能使其变为现实，尤其是在提前体验期间。在下面注册 Storybook 的邮件列表，以获取项目更新通知。

加入我们的 Storybook Discord 聊天 #showcase。我们欢迎新开发者和资深人士的贡献，尤其是在添加到索引方面。

组件百科全书由 Kyle Gach, Amber Smith, Kevin Killingsworth, Tom Coleman, 和 Dominic Nguyen (我!) 开发，并得到了整个 Storybook 社区的反馈。特别感谢 Iain Bean 的早期指导。