介绍

这不是一个组件库，而是你构建组件库的方法。

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

这种方式在你需要定制某个组件以适配设计系统，或者需要一个库里没有的组件之前，都运行得很好。通常最后你会不得不包一层库组件、写各种变通方案来覆盖样式，或者混用来自不同库、API 互不兼容的组件。

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

• 开放代码： 组件代码的最上层对修改完全开放。
• 组合： 每个组件都使用统一、可组合的接口，因此行为可预测。
• 分发： 通过扁平文件结构和命令行工具，可以轻松分发组件。
• 精致默认值： 精心挑选的默认样式，让你开箱即可获得出色的设计。
• 适合 AI： 开放的代码便于 LLM 读取、理解并改进。

开放代码

shadcn/ui 直接把真实的组件代码交到你手里。你可以完全控制这些组件，并按需要进行定制和扩展。这意味着：

• 完全透明： 你能清楚看到每个组件是如何构建的。
• 易于定制： 你可以修改组件的任意部分，以满足设计和功能需求。
• AI 集成： 由于可以直接访问代码，LLM 很容易阅读、理解，甚至改进你的组件。

在传统库里，如果你需要改变按钮行为，通常只能覆盖样式或再包一层组件。而在 shadcn/ui 中，你只需要直接编辑按钮代码。

组合

shadcn/ui 中的每个组件都共享统一、可组合的接口。如果某个组件不存在，我们会把它引入进来，改造成可组合的形式，并调整样式，让它与整个设计系统保持一致并协同工作。

统一、可组合的接口意味着，对你的团队和 LLM 来说都更可预测。你不需要为每一个新组件重新学习一套不同的 API，即使是第三方组件也是如此。

分发

shadcn/ui 同时也是一个代码分发系统。它为组件定义了 schema，并提供 CLI 来分发这些组件。

• Schema： 一种扁平文件结构，用于定义组件、它们的依赖以及属性。
• CLI： 一个命令行工具，可在跨框架支持下把组件分发并安装到各个项目中。

你可以使用这个 schema 把组件分发到其他项目，也可以让 AI 基于现有 schema 生成全新的组件。

精致默认值

shadcn/ui 提供了大量组件，并且为它们精心选择了默认样式。它们既能单独看起来很好，也能作为一个统一系统协同工作：

• 开箱即好： 你的 UI 无需额外工作就能呈现简洁、克制的外观。
• 统一设计： 组件之间天然契合。每个组件都围绕彼此而构建，让你的 UI 始终保持一致。
• 易于定制： 如果你想改动某些内容，覆盖和扩展默认值都很简单。

适合 AI

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

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