shadcn ui nx next

shadcn/ui + Nx + Next.js

This is a sample project that demonstrates how to use shadcn/ui with Nx and Next.js.

Running this project locally

npx nx serve next-app

Manual setup steps

Commands to generate the project:

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

Copy the following files from this repo to your project:

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

Installing new shadcn/ui components

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