shadcn/ui

Was ist es?

shadcn/ui ist keine Component-Library im klassischen Sinn — es ist ein CLI, das Source-Code von Komponenten (Radix UI + Tailwind) in dein Repo kopiert. Du besitzt den Code, kannst alles anpassen, kein Versions-Lock-in.

Quickstart

pnpm dlx shadcn@latest init
pnpm dlx shadcn@latest add button card dialog dropdown-menu

Komponenten landen in components/ui/, Utils in lib/utils.ts. components.json konfiguriert Pfade und Style.

Typische Patterns

• Komponenten lokal anpassen statt overrides — die Datei gehört dir.
• Composition über asChild (Radix-Pattern):

  <Button asChild><Link href="/foo">Go</Link></Button>
  

• Variants über cva (class-variance-authority) — siehe button.tsx.
• Headless + Tailwind: Radix-Primitives liefern A11y, Tailwind macht Optik.
• Registry-Pattern: eigene Registries für interne Component-Sammlungen via MCP / add.

Gotchas / Was oft schiefgeht

• Updates kommen nicht automatisch — du musst add re-runnen und Diffs mergen.
• cn() aus lib/utils.ts ist Pflicht für Variant-Merging — sonst doppelte/konflikt-Klassen.
• Radix-Komponenten brauchen oft Portals → SSR-Hydration-Warnings, wenn id nicht stabil. useId() nutzen.
• Dark-Mode-Tokens in globals.css müssen sowohl :root als auch .dark definieren.
• Forms: shadcn-Form ist react-hook-form + zod — Setup ist nicht trivial, aber Standard.

Wann nicht?

Wenn du keine Kontrolle über Component-Source brauchst und Auto-Updates willst → Mantine, MUI, Chakra. Bei reinem Headless-Need ohne Tailwind → Radix UI direkt.