文档
Next.js
Next.js
安装并配置 Next.js。
如果你正在使用 Next.js 15,请查看 Next.js 15 + React 19 指南。
创建项目
运行 init
命令来创建一个新的 Next.js 项目或设置一个已存在的项目
pnpm dlx shadcn@latest init
你可以使用 -d
flag 来使用默认值,例如 css 变量可以使用 new-york
、zinc
和 yes
。
pnpm dlx shadcn@latest init -d
配置 components.json
你会被问到几个问题来配置 components.json
Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes
就是这样
你现在可以开始向你的项目添加组件了。
pnpm dlx shadcn@latest add button
上面的命令会将 Button
组件添加到你的项目中。然后你可以像这样导入它
import { Button } from "@/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}