简介

这不是一个组件库。这是你构建组件库的方式。

你知道大多数传统组件库是如何工作的：你从 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-vue 旨在解决的问题。它是围绕以下原则构建的：

🌐 This is what shadcn-vue aims to solve. It is built around the following principles:

• 开放代码: 你的组件代码的最顶层可以进行修改。
• 组成: 每个组件都使用通用的、可组合的接口，使它们具有可预测性。
• 分发： 使用扁平文件模式和命令行工具可以轻松分发组件。
• 美丽的默认设置： 精心挑选的默认样式，让你开箱即用即可获得出色的设计。
• AI 准备就绪： 为大型语言模型开放代码，以便阅读、理解和改进。

打开代码

🌐 Open Code

shadcn-vue 为你提供实际的组件代码。你可以完全控制以根据你的需求自定义和扩展组件。这意味着：

🌐 shadcn-vue hands you the actual component code. You have full control to customize and extend the components to your needs. This means:

• 完全透明: 你可以清楚地看到每个组件是如何构建的。
• 轻松定制： 修改组件的任何部分以符合你的设计和功能需求。
• 人工智能整合: 访问代码使大型语言模型能够轻松阅读、理解甚至改进你的组件。

在一个典型的库中，如果你需要改变按钮的行为，你必须重写样式或封装组件。使用 shadcn-vue，你只需直接编辑按钮代码。

🌐 In a typical library, if you need to change a button's behavior, you have to override styles or wrap the component. With shadcn-vue, you simply edit the button code directly.

组合

🌐 Composition

shadcn-vue 中的每个组件都共享一个通用的、可组合的接口。如果某个组件不存在，我们会引入它，使其可组合，并调整其样式以匹配并与其余的设计系统协同工作。

🌐 Every component in shadcn-vue 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-vue 也是一个代码分发系统。它为组件定义了一个模式，并提供了一个用于分发它们的命令行工具。

🌐 shadcn-vue 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-vue 附带大量组件，这些组件具有精心挑选的默认样式。它们设计得既能单独看起来美观，又能作为一个一致的系统协同工作：

🌐 shadcn-vue 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-vue 的设计使 AI 工具能够轻松处理你的代码。它的开源代码和一致的 API 允许 AI 模型读取、理解，甚至生成新的组件。

🌐 The design of shadcn-vue 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.