你的项目准备好了！

你已经使用 shadcn/ui 创建了一个新项目。

以下是一些入门时可以做的事情，帮助你开始使用 shadcn/ui 构建。

添加组件

使用 CLI 向你的项目添加组件。


pnpm dlx shadcn@latest add button

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

app/page.tsx

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return <Button>点击我</Button>
}

与传统的组件库不同，shadcn/ui 会将组件源码直接添加到你项目的 components/ui/ 目录下。你拥有这些代码，并且可以按照自己的意愿自定义它们。

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


pnpm dlx shadcn@latest add button card input label


pnpm dlx shadcn@latest add --all

浏览所有组件，请访问组件页面。

你可以直接在 CSS 文件中编辑你的主题。了解更多关于主题定制，以及如何使用 CSS 变量或实用类。

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


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

你可以使用 CLI 向项目中添加区块。


pnpm dlx shadcn@latest add login-03

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

app/page.tsx

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

shadcn/ui 拥有日益丰富的社区注册表生态系统。你可以使用 CLI 从任意注册表 URL 安装组件。


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

浏览注册表目录获取可用注册表列表。

shadcn/ui 设计时就考虑到了与 AI 的配合。你的 AI 助手可以读取项目中的组件源码，理解 API，并将它们组合起来构建页面和功能。

以下是一些示例提示词供你尝试：

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


pnpm dlx skills add shadcn/ui

了解更多关于技能。

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


pnpm dlx shadcn@latest mcp init

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