shadcn/ui unter Next.js

Eine ganz wichtige Sache vorweg: shadcn/ui ist keine starre Component Library! Vereinfacht gesagt, handelt es sich um eine Sammlung von wiederverwendbaren Komponenten, die du kopieren und in deine App einfügen kannst. Das ganze basiert auf Radix UI gepaart mit Tailwind CSS und funktioniert nach einem einfachen Prinzip:

• Wähle Komponenten, die du brauchst
• Kopieren den Code in dein Projekt
• Passe alles so an, wie du es brauchst

Der ganze Code bleibt dabei unter deiner Kontrolle. Du baust dir im Prinzip eine eigene Component Library zusammen.

Und bevor wie tiefer einsteigen: Das ganze funktioniert natürlich nicht nur mit Next.js, sondern mit jedem React basierten Framework (Astro, Remix, Gatsby etc.)

#Die Installation

Wir richten das ganze einmal unter einem neuen Next.js Projekt ein und schauen uns im Nachgang die genaue Verwendung an.

#Das Projekt initialisieren

npx create-next-app@latest my-demo-app

#shadcn/ui initialisieren

Im Projekt-Root nutzen wir nun folgenden Befehl, um shadcn/ui zu konfigurieren

npx shadcn-ui@latest init

Im Setup werden uns einige Fragen gestellt:

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes

Fast alles davon kann im Default belassen werden. Bei der Tailwind Config musste ich einmal die Dateiendung korrigieren, diese ist im Next.js-Standard-Projekt eine .ts: Where is your tailwind.config.js located? › tailwind.config.ts.

Bei dem Punkt Do you want to use CSS variables for colors? › no / yes, müsst ihr es euch selbst aussuchen. Ich habe das ganze nicht gemacht, ihr könnt das natürlich gerne nutzen. Aktiviert ihr die Option, so wird in der global.css-Datei das ganze Farbschema der Komponenten über Variablen geregelt. Sagt ihr hier no, so könnt ihr in eurem Komponenten die Farben wie gewohnt über Tailwind CSS hinterlegen.

#App Struktur

Habt ihr das ganze abgeschlossen, so findet ihr eibn paar neue Ordner und Dateien in eurem Projekt. Hier eine kurze Erklärung:

.
├── app
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── Navbar.tsx
│   ├── PageHeader.tsx
│   └── ...
├── lib
│   └── utils.ts
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.ts
└── tsconfig.json

• shadcn/ui platziere die UI-Komponenten im Ordner components/ui
• Deine Komponenten wie <PageHeader /> und <Navbar /> werden wie gewohnt im Ordner components abgelegt
• Der Ordner lib enthält alle Dienstfunktionen. Hier liegt eine utils.ts, in der die cn-Hilfsfunktion definiert ist

Das war es auch schon mit dein Einrichtung, nun geht es ans Benutzen.

#Verwendung

In der Doku findet ihr allerlei Blueprints für eure Komponenten. Wir starten einmal mit einem einfachen Button.

Um den Button im Projekt verfügbar zum machen, nutzen wir einmal folgenden Befehl im Projekt-Root:

npx shadcn-ui@latest add button

Ist das Script erfolgreich durchgelaufen, so findet ihr nun im Ordner components/ui das Skelett eures neuen Buttons. Hier könnt ihr nun Änderungen am Style machen oder das Ganze auch schon so nutzen. Wir belassen ihn für die Demo mal wie er ist und erweitern nun unsere page.tsx:

import { Button } from "@/components/ui/button";

export default function Home() {
    return (
        <div>
            <Button>Klick mich</Button>
        </div>
    );
}

Und sehe da:

Das ganze lässt sich nun auch noch in ein paar verschiedenen Styles ausgeben. Hier einmal ein paar Beispiele:

(Die Blueprints respektieren natürlich auch den Dark-Mode von Tailwind CSS)

Der Code zum Nachlesen:

import { Button } from "@/components/ui/button";
import { ChevronRight, Mail, Loader2 } from "lucide-react";
import Link from "next/link";

export default function Home() {
    return (
        <div>
            <Button>Klick mich</Button>
            <Button variant="secondary">Sekundär</Button>
            <Button variant="destructive">Destruktiv</Button>
            <Button variant="outline">Outline</Button>
            <Button variant="ghost">Ghost</Button>
            <Button variant="link">Link</Button>
            <Button variant="outline" size="icon">
                <ChevronRight className="h-4 w-4" />
            </Button>
            <Button>
                <Mail className="mr-2 h-4 w-4" /> Login mit Email
            </Button>
            <Button disabled>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Bitte warten
            </Button>
            <Button asChild>
                <Link href="/login">Login</Link>
            </Button>
        </div>
    );
}

#Fazit

Ich hoffe das ganze konnte euch einen kleinen Einblick in shadcn/ui geben. Ich nutze die Bibliothek sehr gerne, da ich so einfach viel schneller voran komme und mir keine Gedanken um die Funktionalität und die Accessibility machen muss. Probiert das ganze gerne mal aus und überzeugt euch selbst.

Happy Coding! 🎉