介绍

这不是一个组件库。这是你构建组件库的方式。

你知道大多数传统组件库是怎样工作的：你从 NPM 安装一个包，导入组件，然后在应用中使用它们。

这种方法在你不需要自定义组件以符合你的设计系统，或者不需要库中未包含的组件时，工作得很好。但通常，你会发现不得不去包装库组件、编写解决方案来覆盖样式，或者混合使用带有不兼容 API 的不同库的组件。

这正是 shadcn/ui 旨在解决的问题。它基于以下原则构建：

• 开放代码： 组件代码的最顶层是开放可修改的。
• 组合性： 每个组件使用通用的、可组合的接口，使其可预测。
• 分发性： 扁平文件结构和命令行工具使组件分发变得轻松。
• 美观默认： 精心挑选的默认样式，让你开箱即用即可获得出色设计。
• AI 友好： 开放代码便于大型语言模型读取、理解和改进。

开放代码

shadcn/ui 直接交付组件的实际代码。你可以完全控制，自定义和扩展组件以满足你的需求。这意味着：

• 完全透明： 你能准确看到每个组件是如何构建的。
• 轻松定制： 修改组件的任何部分以符合你的设计和功能需求。
• AI 集成： 访问代码使大型语言模型能够轻松读取、理解，甚至优化你的组件。

在典型的库里，如果你想改变按钮的行为，就需要覆盖样式或包装组件。而用 shadcn/ui，你只需直接编辑按钮代码即可。

组合性

shadcn/ui 中的每个组件共享一个通用且可组合的接口。如果缺少某个组件，我们会引入它，使其具备组合能力，并调整样式以匹配并与设计系统的其他部分协同工作。

共享的可组合接口意味着对你的团队和大型语言模型来说都是可预测的。你不需要为每个新组件学习不同的 API。即使是第三方组件也是如此。

分发性

shadcn/ui 也是一个代码分发系统。它定义了组件的结构模式和分发它们的命令行工具。

• 结构模式： 一个扁平文件结构，用于定义组件、依赖及属性。
• 命令行工具： 一个跨框架支持的命令行工具，用于在不同项目间分发和安装组件。

你可以使用结构模式将组件分发到其他项目，或让 AI 基于已有的结构模式生成全新组件。

美观默认

shadcn/ui 提供了大量精心挑选默认样式的组件。它们被设计得不仅独立美观，还能作为一个一致的系统协调工作：

• 开箱即用： 你的 UI 将拥有干净、极简的外观，无需额外工作。
• 统一设计： 组件彼此自然契合。每个组件都专门构建以匹配其他组件，确保 UI 一致。
• 易于自定义： 如果你想修改，覆盖和扩展默认样式非常简单。

AI 友好

shadcn/ui 的设计使 AI 工具能够轻松操作你的代码。其开放代码和一致的 API 让 AI 模型可以读取、理解，甚至生成新组件。

AI 模型能够学习你的组件工作原理，并提出改进建议，甚至创建与现有设计集成的新组件。