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 ' ;