This is a sample project that demonstrates how to use shadcn/ui with Nx and Next.js.
npx nx serve next-app
Commands to generate the project:
npx create-nx-workspace@latest
npm i -D @nx/next
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
Copy the following files from this repo to your project:
After following the installation steps above, installing shadcn/ui components is a simple task and requires the following steps
npx shadcn-ui@latest add <component> # e.g button
Add/Export the new component to libs/shadcn-ui/src/index.ts
export * from './components/ui/command';
Now, you're able to use your component on your Nx Project
import { Button } from '@libs/shadcn-ui';