这不是一个组件库。这是你构建组件库的方式。
你知道大多数传统组件库是如何工作的：你从 NPM 安装一个包，导入组件，然后在你的应用中使用它们。
🌐 You know how most traditional component libraries work: you install a package from NPM, import the components, and use them in your app.
这种方法一直有效，直到你需要自定义一个组件以适应你的设计系统，或者需要一个库中没有的组件。通常，你最终会对库组件进行封装，编写绕过方法来覆盖样式，或者混合使用具有不兼容 API 的不同库的组件。
🌐 This approach works well until you need to customize a component to fit your design system or require one that isn’t included in the library. Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.
这就是 shadcn/ui 旨在解决的问题。它是围绕以下原则构建的：
🌐 This is what shadcn/ui aims to solve. It is built around the following principles:
- 开放代码: 你的组件代码的最顶层可以进行修改。
- 组成: 每个组件都使用通用的、可组合的接口，使它们具有可预测性。
- 分发： 使用扁平文件模式和命令行工具可以轻松分发组件。
- 美丽的默认设置： 精心挑选的默认样式，让你开箱即用即可获得出色的设计。
- AI 准备就绪： 为大型语言模型开放代码，以便阅读、理解和改进。
打开代码
🌐 Open Code
shadcn/ui 为你提供实际的组件代码。你可以完全控制以自定义和扩展组件以满足你的需求。这意味着：
🌐 shadcn/ui hands you the actual component code. You have full control to customize and extend the components to your needs. This means:
- 完全透明: 你可以清楚地看到每个组件是如何构建的。
- 轻松定制： 修改组件的任何部分以符合你的设计和功能需求。
- 人工智能整合: 访问代码使大型语言模型能够轻松阅读、理解甚至改进你的组件。
在典型的库中，如果你需要改变按钮的行为，你必须重写样式或封装组件。而使用 shadcn/ui，你只需直接编辑按钮代码。
🌐 In a typical library, if you need to change a button’s behavior, you have to override styles or wrap the component. With shadcn/ui, you simply edit the button code directly.
组合
🌐 Composition
shadcn/ui 中的每个组件都共享一个通用的、可组合的接口。如果组件不存在，我们会引入它，使其可组合，并调整其样式以匹配并与设计系统的其他部分一起工作。
🌐 Every component in shadcn/ui shares a common, composable interface. If a component does not exist, we bring it in, make it composable, and adjust its style to match and work with the rest of the design system.
共享的、可组合的接口意味着它对你的团队和大型语言模型都是可预测的。你不需要为每一个新组件学习不同的 API，即使是第三方的也是如此。
🌐 A shared, composable interface means it's predictable for both your team and LLMs. You are not learning different APIs for every new component. Even for third-party ones.
分发
🌐 Distribution
shadcn/ui 也是一个代码分发系统。它定义了组件的模式和分发它们的命令行工具（CLI）。
🌐 shadcn/ui is also a code distribution system. It defines a schema for components and a CLI to distribute them.
- 模式： 定义组件、它们的依赖及属性的扁平文件结构。
- CLI: 一个命令行工具，用于在项目之间分发和安装组件，并支持跨框架使用。
你可以使用该模式将你的组件分发到其他项目，或基于现有模式让 AI 生成全新的组件。
🌐 You can use the schema to distribute your components to other projects or have AI generate completely new components based on existing schema.
漂亮的默认值
🌐 Beautiful Defaults
shadcn/ui 提供了大量组件，这些组件具有精心选择的默认样式。它们的设计既可以单独看起来漂亮，也可以作为一个一致的系统很好地协同工作：
🌐 shadcn/ui comes with a large collection of components that have carefully chosen default styles. They are designed to look good on their own and to work well together as a consistent system:
- 开箱即用的优质体验： 你的界面干净简洁，无需额外操作。
- 统一设计： 组件自然地相互契合。每个组件都经过设计以匹配其他组件，保持你的界面一致性。
- 轻松自定义： 如果你想更改某些内容，只需简单地覆盖和扩展默认设置。
AI 就绪
🌐 AI-Ready
shadcn/ui 的设计使 AI 工具能够轻松地与你的代码协作。其开源代码和一致的 API 允许 AI 模型读取、理解，甚至生成新的组件。
🌐 The design of shadcn/ui makes it easy for AI tools to work with your code. Its open code and consistent API allow AI models to read, understand, and even generate new components.
一个人工智能模型可以学习你的组件如何工作，并提出改进建议，甚至创建可以与你现有设计集成的新组件。
🌐 An AI model can learn how your components work and suggest improvements or even create new components that integrate with your existing design.