112k
新建

Next.js

PreviousNext

为 Next.js 安装和配置 shadcn/ui。

选择适合你起点的方案。

使用 shadcn/create

构建预设并生成 Next.js 项目命令。

使用 CLI

直接在终端中为新的 Next.js 项目创建脚手架。

现有项目

在现有的 Next.js 项目中手动配置 shadcn/ui。

使用 shadcn/create

构建你的预设

打开 shadcn/create 并以可视化方式构建你的预设。选择样式、颜色、字体、图标等。

打开 shadcn/create

创建项目

点击 Create Project，选择你的包管理器，然后复制生成的命令。

生成的命令看起来大致如下：

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

最终命令会包含你选择的选项，例如 --base、--monorepo 或 --rtl。

添加组件

向你的项目添加 Card 组件：

pnpm dlx shadcn@latest add card

如果你创建了 monorepo，请在 apps/web 目录中运行命令，或者从仓库根目录指定 workspace：

pnpm dlx shadcn@latest add card -c apps/web

上面的命令会把 Card 组件添加到你的项目中。之后你可以像这样导入它：

app/page.tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
export default function Home() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>项目概览</CardTitle>
        <CardDescription>
          跟踪你的 Next.js 应用的进展和最近活动。
        </CardDescription>
      </CardHeader>
      <CardContent>
        你的设计系统已经就绪。开始构建下一个组件吧。
      </CardContent>
    </Card>
  )
}

如果你创建了 monorepo，请改为更新 apps/web/app/page.tsx，并从 @workspace/ui/components/card 导入。

使用 CLI

创建项目

运行 init 命令以为新的 Next.js 项目创建脚手架。按照提示配置项目：base、preset、monorepo 等。

pnpm dlx shadcn@latest init -t next

对于 monorepo 项目，请使用 --monorepo 标志：

pnpm dlx shadcn@latest init -t next --monorepo

添加组件

向你的项目添加 Card 组件：

pnpm dlx shadcn@latest add card

如果你创建了 monorepo，请在 apps/web 目录中运行命令，或者从仓库根目录指定 workspace：

pnpm dlx shadcn@latest add card -c apps/web

上面的命令会把 Card 组件添加到你的项目中。之后你可以像这样导入它：

app/page.tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
export default function Home() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>项目概览</CardTitle>
        <CardDescription>
          跟踪你的 Next.js 应用的进展和最近活动。
        </CardDescription>
      </CardHeader>
      <CardContent>
        你的设计系统已经就绪。开始构建下一个组件吧。
      </CardContent>
    </Card>
  )
}

如果你创建了 monorepo，请改为更新 apps/web/app/page.tsx，并从 @workspace/ui/components/card 导入。

现有项目

创建项目

如果你需要一个新的 Next.js 项目，请先用 create-next-app 创建一个。否则，跳过此步骤。

pnpm create next-app@latest

请选择推荐默认项，这样 Tailwind CSS、App Router 和默认的 @/* 导入别名都会自动为你配置好。

如果你更喜欢使用 src/ 目录，请使用 --src-dir，或者在提示时选择 Yes：

pnpm create next-app@latest --src-dir

使用 --src-dir 时，Next.js 会把应用放在 src/app 中，并将 @/* 别名配置为指向 ./src/*。

配置 Tailwind CSS 和导入别名

如果你使用的是推荐的 create-next-app 默认配置，可以跳过这一步。

如果你要在旧版或自定义的 Next.js 应用中添加 shadcn/ui，请先确保已安装 Tailwind CSS。你可以参考官方 Next.js 安装指南。

然后确保你的 tsconfig.json 包含 @/* 导入别名：

tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

如果你使用了 --src-dir，请改为将别名指向 ./src/*。

运行 CLI

运行 shadcn init 命令，为你的项目设置 shadcn/ui。

pnpm dlx shadcn@latest init

添加组件

现在你可以开始向项目中添加组件了。

pnpm dlx shadcn@latest add button

上面的命令会把 Button 组件添加到你的项目中。之后你可以像这样导入它：

app/page.tsx
import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Button>点击我</Button>
    </div>
  )
}

如果你使用了 --src-dir，请改为把组件添加到 src/app/page.tsx。