89.1k

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

创建项目

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

pnpm dlx shadcn@latest init

选择 Next.js 项目或 Monorepo。

添加组件

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

pnpm dlx shadcn@latest add button

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

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