Next.js

Docs

Next.js

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

注意：以下指南适用于 Tailwind v4。如果你使用的是 Tailwind v3，请使用 shadcn@2.3.0。

¥Note: The following guide is for Tailwind v4. If you are using Tailwind v3, use shadcn@2.3.0.

创建项目

¥Create project

运行 init 命令以创建新的 Next.js 项目或设置现有项目：

¥Run the init command to create a new Next.js project or to setup an existing one:

pnpm dlx shadcn@latest init

请选择 Next.js 项目或 Monorepo。

¥Choose between a Next.js project or a Monorepo.

添加组件

¥Add Components

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

¥You can now start adding components to your project.

pnpm dlx shadcn@latest add button

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

¥The command above will add the Button component to your project. You can then import it like this:

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

更新日志 Vite

页面导航

创建项目
添加组件