介绍

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

我们都熟悉传统组件库的工作方式：从 NPM 安装一个包，按需导入组件，然后在应用中使用。

这种方式在需要快速使用组件时很方便，但一旦需要深度定制以适配设计系统，或者库里缺少某个组件，就会开始变得麻烦。你很可能不得不包一层组件、写各种 hack 来覆盖样式，甚至混用多个 API 不兼容的库。

shadcn/ui 正是为了解决这些问题而生，围绕以下原则构建：

• 开放代码： 组件的顶层代码完全开放，随时可修改。
• 可组合性： 所有组件共享一致、可组合的接口，行为可预期。
• 易分发： 基于扁平文件结构与 CLI，组件分发变得简单。
• 精致默认： 默认样式经过精心打磨，开箱即用就很好看。
• 面向 AI： 开放代码方便 LLM 阅读、理解并提出优化。

开放代码

shadcn/ui 会把真实的组件代码交到你手中，你可以完全掌控、自由定制和扩展。这意味着：

• 完全透明： 组件如何实现一目了然。
• 易于定制： 任何部分都能按需求改动，满足设计与功能要求。
• 便于接入 AI： 代码开放，LLM 可以轻松阅读、理解甚至帮助改进。

在传统组件库里，想修改按钮行为通常要覆盖样式或包一层组件；在 shadcn/ui 中，你只需直接修改按钮代码即可。

可组合性

shadcn/ui 的每个组件都遵循统一的可组合接口。如果某个组件尚不存在，我们会把它引入、封装成可组合的形式，并调整风格让它与整个设计系统一致。

统一的可组合接口既让团队更容易上手，也方便 LLM。新增组件不需要学习全新的 API，即便是第三方组件也能快速融入。

分发

shadcn/ui 同样还是一个代码分发系统，通过 schema 描述组件，并提供 CLI 来进行分发。

• Schema： 采用扁平文件结构描述组件、依赖与属性。
• CLI： 命令行工具支持跨项目、跨框架安装与分发组件。

你可以利用 schema 把组件分发到其他项目，或让 AI 基于既有 schema 生成全新的组件。

精致的默认样式

shadcn/ui 附带大量组件，并提供经过反复打磨的默认样式。它们既要独立时好看，也要作为一个一致的系统协同工作：

• 开箱即用的美观： 不做额外工作，你的 UI 就能保持简洁与质感。
• 统一的设计语言： 组件之间自然协作，整体体验始终如一。
• 轻松定制： 想改哪里都很简单，默认样式易于覆盖和扩展。

面向 AI

shadcn/ui 的设计天然适配 AI 工具。开放的代码与一致的 API 便于 AI 模型读取、理解，甚至生成新的组件。

AI 模型可以学习组件的运作方式，提出改进建议，甚至创建与你现有设计完美融合的新组件。