shadcn ui nx next

shadcn/ui + nx + next.js

這是一個示例項目，演示瞭如何將shadcn/ui與nx和next.js一起使用。

本地運行此項目

npx nx serve next-app

手動設置步驟

命令生成項目：

npx create-nx-workspace@latest workspacename
cd workspacename
npm i -D @nx/next @nx/react
nx g @nx/next:app next-app # use "tailwind" as style options
nx g @nx/react:library shadcn-ui # none for all options
nx g @nx/next:setup-tailwind --project=next-app
npm i tailwindcss-animate class-variance-authority clsx tailwind-merge
nx g @nx/next:setup-tailwind --project=next-app
npm i lucide-react

將以下文件從此存儲庫複製到您的項目：

• components.json
• tsconfig.json
• tsconfig.base.json
• apps/next-app/tailwind.config.js

安裝新的ShadCN/UI組件

遵循上面的安裝步驟後，安裝ShadCN/UI組件是一個簡單的任務，需要以下步驟

npx shadcn-ui@latest add < component > # e.g button

將新組件添加/導出到libs/shadcn-ui/src/index.ts

 export * from ' ./components/ui/command ' ;

現在，您可以在NX項目上使用組件

import { Button } from ' @libs/shadcn-ui ' ;