文档目录 > 介绍
介绍
大多数传统组件库的工作方式：您从 NPM 安装一个包，导入组件，然后在应用中使用它们。
这种方法在您需要自定义组件以适应设计系统或需要库中未包含的组件时就会遇到问题。您最终往往会包装库组件、编写变通方案来覆盖样式，或者混合使用来自不同库的具有不兼容 API 的组件。
这正是 shadcn/ui 旨在解决的问题。它围绕以下原则构建：
开放代码 (Open Code)
shadcn/ui 将实际的组件代码交给您。您拥有完全的控制权来自定义和扩展组件以满足需求。
- 完全透明：您可以准确看到每个组件是如何构建的。
- 轻松自定义：修改组件的任何部分以适应您的设计和功能需求。
- AI 集成：访问代码使得 LLM 可以直接读取、理解甚至改进您的组件。
在传统库中，如果您需要更改按钮的行为，必须覆盖样式或包装组件。而使用 shadcn/ui，您可以直接编辑按钮代码。
如何在开放代码方法中拉取上游更新？
组合性 (Composition)
shadcn/ui 中的每个组件都共享一个通用的、可组合的接口。如果某个组件不存在，我们会引入它，使其可组合，并调整其样式以匹配并融入设计系统的其余部分。
共享的可组合接口意味着对您的团队和 LLM 来说都是可预测的。您无需为每个新组件学习不同的 API。即使是第三方组件也是如此。
分发 (Distribution)
shadcn/ui 也是一个代码分发系统。它定义了组件的 schema 和一个用于分发它们的 CLI。
- Schema：一种扁平文件结构，定义了组件、其依赖项和属性。
- CLI：一个命令行工具，用于跨项目分发和安装组件，支持多种框架。
您可以使用 schema 将组件分发到其他项目，或让 AI 基于现有 schema 生成全新的组件。
美观的默认样式 (Beautiful Defaults)
shadcn/ui 附带大量拥有精心选择的默认样式的组件。它们被设计为独立使用时看起来很棒，并且作为一个一致的系统协同工作：
- 开箱即用：无需额外工作，您的 UI 就拥有干净、简约的外观。
- 统一设计：组件自然相互匹配。每个组件都旨在与其他组件保持一致，保证 UI 的一致性。
- 易于自定义：如果您想更改某些内容，只需覆盖和扩展默认值即可。
AI 就绪 (AI-Ready)
shadcn/ui 的设计使得 AI 工具可以轻松处理您的代码。其开放的代码和一致的 API 允许 AI 模型读取、理解甚至生成新组件。
AI 模型可以学习您的组件如何工作，并建议改进或创建与您现有设计集成的新组件。