shadcn/ui 介绍

shadcn/ui 是一组精美设计、可访问的组件和代码分发平台。它与你最喜欢的框架和 AI 模型兼容。开源，开源代码。

这不是一个组件库。它是你如何构建你的组件库。

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

这种方法在你需要定制一个组件以适应你的设计系统，或者需要一个库中没有的组件时，就不再适用。通常，你最终会包装库组件，编写变通方法来覆盖样式，或者将来自不同库的组件混合使用，这些库的 API 不兼容。

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

• 开放代码： 你的组件代码的最上层是开放的，可以进行修改。
• 组合性： 每个组件使用一个通用的、可组合的接口，使它们具有可预测性。
• 分发： 扁平文件架构和命令行工具使得分发组件变得简单。
• 美观的默认样式： 精心挑选的默认样式，让你一开始就能获得出色的设计。
• AI 就绪： 开放的代码让大语言模型能够读取、理解并改进。

开放代码

shadcn/ui 将实际的组件代码交给你。你可以完全控制组件的定制和扩展，以满足你的需求。这意味着：

• 完全透明： 你可以看到每个组件是如何构建的。
• 轻松定制： 修改组件的任何部分，以适应你的设计和功能需求。
• AI 集成： 访问代码使得大语言模型能够轻松读取、理解，甚至改进你的组件。

在一个典型的库中，如果你需要更改按钮的行为，你必须覆盖样式或包装组件。而在 shadcn/ui 中，你只需直接编辑按钮代码。

如何拉取上游更新？

shadcn/ui 遵循无头组件架构。这意味着你的应用核心可以通过更新依赖项来接收修复，例如 radix-ui 或 input-otp。

最上层，也就是最接近你设计系统的层，与库的实现是解耦的。它保持开放，供修改。

组合性

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

共享的、可组合的接口意味着它对你的团队和大语言模型都是可预测的。你不需要为每个新组件学习不同的 API，甚至对于第三方组件也是如此。

分发

shadcn/ui 还是一个代码分发系统。它定义了组件的架构和一个命令行工具，用于分发它们。

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

你可以使用架构将组件分发到其他项目，或者让 AI 基于现有的架构生成全新的组件。

美观的默认样式

shadcn/ui 配备了一大批具有精心挑选的默认样式的组件。它们不仅设计得很美观，而且能够很好地协作，作为一个一致的系统工作：

• 开箱即用： 你的 UI 看起来干净且简约，无需额外工作。
• 统一设计： 组件自然地与其他组件匹配。每个组件都旨在与其他组件一致，保持 UI 的一致性。
• 易于定制： 如果你想更改某些内容，覆盖和扩展默认样式非常简单。

AI 就绪

shadcn/ui 的设计使得 AI 工具能够轻松与代码互动。其开放的代码和一致的 API 允许 AI 模型读取、理解，甚至生成新的组件。

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