Next.js 框架中安装

安装和配置 Next.js。

更新： 我们在 canary 版本中已添加对 React 19 和 Tailwind v4 的完整支持。有关更多信息，请参见 Tailwind v4 文档。

创建项目

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

pnpm npmyarn bun

pnpm dlx shadcn@latest init

你可以使用 -d 标志来选择默认设置，例如 new-york、zinc 和 yes 用于 CSS 变量。

pnpm npmyarn bun

pnpm dlx shadcn@latest init -d

配置 components.json

系统会询问你几个问题来配置 components.json：

你想使用什么样的样式？ › New York
你希望使用什么颜色作为基础颜色？ › Zinc
你是否要使用 CSS 变量来管理颜色？ › no / yes

就这些

现在，你可以开始将组件添加到你的项目中。

pnpm npmyarn bun

pnpm dlx shadcn@latest add button

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

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