109k
新建

Next.js

上一页下一页

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

创建项目

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

pnpm dlx shadcn@latest init -t next

对于 monorepo（单体多仓库）项目，请使用 --monorepo 参数

pnpm dlx shadcn@latest init -t next --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>
  )
}