Your project is ready!

你已经使用 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 skill。这会让 AI 助手访问完整的组件注册库、文档和搜索能力。


pnpm dlx skills add shadcn/ui

了解更多关于 skills 的信息。

shadcn MCP 服务器会让你的 AI 助手访问完整的组件注册库、文档和搜索功能。把它连接到编辑器中可获得最佳体验。


pnpm dlx shadcn@latest mcp init

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

本页目录