介绍

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

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

这种方法很有效，直到您需要自定义组件以适应您的设计系统或需要库中未包含的组件。 通常，您最终会封装库组件，编写变通方法来覆盖样式，或者混合使用来自不同库且 API 不兼容的组件。

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

• 开放代码： 您的组件代码的顶层是开放的，可以进行修改。
• 可组合性： 每个组件都使用通用的、可组合的接口，使其具有可预测性。
• 分发： 扁平文件模式和命令行工具使分发组件变得容易。
• 精美默认值： 精心选择的默认样式，让您开箱即可获得出色的设计。
• AI 就绪： 开放代码供大型语言模型 (LLM) 读取、理解和改进。

开放代码

shadcn/ui 为您提供实际的组件代码。您可以完全控制根据您的需要自定义和扩展组件。这意味着

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

在典型的库中，如果您需要更改按钮的行为，您必须覆盖样式或封装组件。使用 shadcn/ui，您可以直接编辑按钮代码。

可组合性

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

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

分发

shadcn/ui 也是一个代码分发系统。它定义了组件的模式和用于分发它们的 CLI。

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

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

精美默认值

shadcn/ui 附带大量具有精心选择的默认样式的组件。它们旨在独立美观，并作为一致的系统良好地协同工作

• 开箱即用： 您的 UI 具有简洁、最小的外观，无需额外工作。
• 统一设计： 组件自然地相互匹配。每个组件都构建为与其他组件匹配，从而保持您的 UI 一致。
• 易于自定义： 如果您想更改某些内容，覆盖和扩展默认值很简单。

AI 就绪

shadcn/ui 的设计使 AI 工具可以轻松地与您的代码配合使用。其开放代码和一致的 API 允许 AI 模型读取、理解甚至生成新组件。

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