shadcn ui nx next

Shadcn/Ui + NX + Next.js

Dies ist ein Beispielprojekt, das zeigt, wie Shadcn/UI mit NX und Next.Js.

Dieses Projekt lokal ausführen

npx nx serve next-app

Manuelle Einrichtungsschritte

Befehle zum Generieren des Projekts:

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

Kopieren Sie die folgenden Dateien von diesem Repo in Ihr Projekt:

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

Installation neuer Shadcn/UI -Komponenten

Nach den obigen Installationsschritten ist die Installation von Shadcn/UI -Komponenten eine einfache Aufgabe und erfordert die folgenden Schritte

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

Fügen Sie die neue Komponente zu libs/shadcn-ui/src/index.ts hinzu/exportieren Sie sie

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

Jetzt können Sie Ihre Komponente in Ihrem NX -Projekt verwenden

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