你的项目已经准备好了！

这里有一些你可以做的事情来开始使用 shadcn/ui 构建。

🌐 Here's a few things you can do to get started building with shadcn/ui.

添加组件

🌐 Add Components

使用 CLI 将组件添加到你的项目中。

🌐 Use the CLI to add components to your project.

pnpmnpmyarnbun
pnpm dlx shadcn@latest add button
Copy

然后在你的代码中导入并使用它。

🌐 Then import and use it in your code.

Copyimport { Button } from "@/components/ui/button"
 
export default function Home() {
  return <Button>Click me</Button>
}

与传统的组件库不同，shadcn/ui 会将组件源代码直接添加到你的项目中的 components/ui/ 下。你拥有这些代码，并可以随意进行自定义。

🌐 Unlike traditional component libraries, shadcn/ui adds the component source code directly to your project under components/ui/. You own the code and can customize it however you want.

你可以一次添加多个组件，或添加所有可用组件。

🌐 You can add multiple components at once or add all available components.

pnpmnpmyarnbun
pnpm dlx shadcn@latest add button card input label
Copy

pnpmnpmyarnbun
pnpm dlx shadcn@latest add --all
Copy

在 Components 页面浏览所有组件。

🌐 Browse all components on the Components page.

自定义你的主题

🌐 Customize Your Theme

你可以直接在 CSS 文件中编辑你的主题。了解更多关于主题化以及如何使用 CSS 变量或工具类的信息。

🌐 You can edit your theme directly in your CSS file. Learn more about Theming and how to use CSS variables or utility classes.

如果你想尝试新的预设，你可以在 ui.shadcn.com 上直观地创建自定义主题，并使用预设代码将其应用到你的项目中。

🌐 If you want to try a new preset, you can create a custom theme visually on ui.shadcn.com and apply it to your project using a preset code.

pnpmnpmyarnbun
pnpm dlx shadcn@latest init --preset [CODE]
Copy

添加一个块

🌐 Add a block

你可以使用命令行工具向你的项目添加一个模块。

🌐 You can add a block to your project using the CLI.

pnpmnpmyarnbun
pnpm dlx shadcn@latest add login-03
Copy

这将把 login-03 模块添加到你的项目中。在代码中导入并使用它。

🌐 This will add the login-03 block to your project. Import and use it in your code.

Copyimport { Login03 } from "@/components/login-03"
 
export default function Home() {
  return <Login03 />
}

从注册表安装

🌐 Install from Registries

shadcn/ui 拥有一个不断发展的社区注册表生态系统。你可以使用 CLI 从任何注册表 URL 安装组件。

🌐 shadcn/ui has a growing ecosystem of community registries. You can install components from any registry URL using the CLI.

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @[registry]/[name]
Copy

浏览 注册表目录 以查看可用注册表的列表。

🌐 Browse the Registry Directory for a list of available registries.

使用人工智能构建

🌐 Use AI to Build

shadcn/ui 旨在与 AI 一起使用。你的 AI 助手可以读取你项目中的组件源代码，理解 API，并将它们组合在一起以构建页面和功能。

🌐 shadcn/ui is designed to work with AI. Your AI assistant can read the component source code in your project, understand the APIs, and compose them together to build pages and features.

这里有一些可以尝试的示例提示：

🌐 Here are some example prompts to try:

• 创建一个注册页面，包含用于输入名称、电子邮件和密码的表单。
• 创建一个包含更新个人资料信息表单的设置页面。
• 构建一个带有页眉、统计卡片和数据表格的仪表板。

安装 shadcn 技能

🌐 Install the shadcn Skills

在你的 AI 助手中安装 shadcn 技能。这将使你的 AI 助手可以访问完整的组件注册、文档和搜索功能。

🌐 Install the shadcn skill in your AI assistant. This will give your AI assistant access to the full component registry, documentation, and search.

pnpmnpmyarnbun
pnpm dlx skills add shadcn/ui
Copy

了解更多关于技能的信息。

🌐 Learn more about skills.

连接 MCP 服务器

🌐 Connect the MCP Server

shadcn MCP 服务器为你的 AI 助手提供访问完整组件注册表、文档和搜索的权限。在你的编辑器中连接它以获得最佳体验。

🌐 The shadcn MCP server gives your AI assistant access to the full component registry, documentation, and search. Connect it in your editor for the best experience.

pnpmnpmyarnbun
pnpm dlx shadcn@latest mcp init
Copy

在 MCP 服务器 页面上了解更多信息。

🌐 Learn more on the MCP Server page.