简介

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

你知道传统组件库是如何工作的：你从 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 模型可以学习你的组件如何工作，并建议改进，甚至创建与你现有设计集成的全新组件。