介绍

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

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

这种方法效果很好，直到您需要自定义组件以适应您的设计系统或需要的组件未包含在库中。通常，您最终会包裹库组件，编写解决方案来覆盖样式，或将来自不同库的组件混合在一起，这些组件的 API 不兼容。

这就是 shadcn/ui 旨在解决的问题。它围绕以下原则构建：

• 开放代码： 您的组件代码的顶层是可以修改的。
• 组合性： 每个组件使用一种常见的、可组合的接口，使它们变得可预测。
• 分发： 一个平面文件架构和命令行工具使分发组件变得简单。
• 优美的默认样式： 精心挑选的默认样式，确保您开箱即用的设计出色。
• AI 准备就绪： 开放代码供 LLM 阅读、理解和改进。

开放代码

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

• 完全透明： 您可以准确看到每个组件是如何构建的。
• 简单的自定义： 修改组件的任何部分以适应您的设计和功能要求。
• AI 集成： 可访问的代码使 LLM 更容易读取、理解，甚至改进您的组件。

在典型的库中，如果您需要更改按钮的行为，您必须覆盖样式或包裹组件。而在 shadcn/ui 中，您只需直接编辑按钮代码。

组合性

shadcn/ui 中的每个组件都共享一个通用的、可组合的接口。如果不存在某个组件，我们将其引入，使其可组合，并调整其样式以匹配并与其余设计系统一起工作。

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

分发

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

• 架构： 一个定义组件、它们的依赖关系和属性的平面文件结构。
• CLI： 一个命令行工具，用于在项目之间分发和安装组件，支持跨框架。

您可以使用架构将您的组件分发到其他项目，或者让 AI 根据现有架构生成全新的组件。

优美的默认样式

shadcn/ui 附带了一大批具有精心选择的默认样式的组件。它们设计得既能独立看起来不错，又能作为一个一致的系统很好地协同工作：

• 开箱即用： 您的 UI 拥有干净而简约的外观，无需额外工作。
• 统一设计： 组件自然地彼此契合。每个组件都按照其他组件来构建，使您的 UI 保持一致。
• 易于自定义： 如果您想更改某些内容，覆盖和扩展默认值非常简单。

AI 准备就绪

shadcn/ui 的设计使得 AI 工具能够轻松与您的代码协作。开放的代码和一致的 API 允许 AI 模型读取、理解，甚至生成新组件。

一个 AI 模型可以学习您的组件的工作方式，并提出改进建议，甚至创建与您现有设计集成的新组件。