Claude Code shadcn/ui: React-Komponenten schnell integrieren mit KI

shadcn/ui hat die Art, wie React-Entwickler Komponenten einsetzen, grundlegend verändert. Statt eine Bibliothek zu installieren und sich mit deren API auseinanderzusetzen, kopierst du die Komponenten direkt in dein Projekt — du besitzt den Code, kannst ihn anpassen, und hast keine versteckten Abhängigkeiten. Das klingt nach mehr Aufwand. In der Praxis ist es weniger.

Noch weniger Aufwand, wenn Claude Code dabei ist. Der Einstieg, die Komponentenauswahl, die Formular-Validierung mit Zod, der Dark Mode — jeder dieser Schritte lässt sich mit Claude Code deutlich beschleunigen. Dieser Artikel zeigt, wie das konkret aussieht.

1. Was shadcn/ui ist — und was es nicht ist

shadcn/ui ist keine Komponenten-Bibliothek im klassischen Sinn. Du installierst kein npm-Paket und importierst dann Button aus einem externen Package. Stattdessen fügst du die Komponenten direkt zu deinem Projekt hinzu — als echten Quellcode, den du lesen, ändern und erweitern kannst.

Die Basis ist solide: Radix UI liefert die barrierefreien, unstyled Primitives (Dialog, Popover, Select, etc.), Tailwind CSS übernimmt das Styling, und CSS-Variablen ermöglichen einfaches Theming. Das Ergebnis sind Komponenten, die sofort gut aussehen, vollständig zugänglich sind und sich trotzdem vollständig anpassen lassen.

Verfügbare Komponenten umfassen unter anderem:

• Eingabe und Formulare: Button, Input, Textarea, Select, Checkbox, Radio Group, Switch, Slider
• Overlays und Navigation: Dialog, Sheet, Popover, Dropdown Menu, Context Menu, Tooltip, Navigation Menu
• Datendarstellung: Table, Card, Badge, Avatar, Progress, Skeleton
• Feedback: Toast (via Sonner), Alert, Alert Dialog
• Layout: Separator, Scroll Area, Tabs, Accordion, Collapsible

2. Initialisierung mit npx shadcn@latest init

Der Einstieg ist ein einzelner Befehl, der dich durch die Konfiguration führt:

npx shadcn@latest init

Der Assistent fragt nach Stil (Default oder New York), Basis-Farbe (Slate, Gray, Zinc, Neutral, Stone) und ob CSS-Variablen verwendet werden sollen. Das Ergebnis ist eine components.json im Projektstamm — die Konfigurationsdatei für alle weiteren shadcn-Operationen — sowie angepasste Tailwind-Konfiguration und globale CSS mit den nötigen CSS-Variablen.

Danach installierst du einzelne Komponenten nach Bedarf:

npx shadcn@latest add button
npx shadcn@latest add dialog form table toast

Jede Komponente landet als Datei in components/ui/ — bereit zum Anpassen. Claude Code kann dir dabei helfen, die richtigen Komponenten für dein Vorhaben auszuwählen:

claude "Ich baue ein Admin-Dashboard mit Datentabelle, Suchfeld und
einem Modal zum Bearbeiten von Einträgen. Welche shadcn/ui-Komponenten
brauche ich und in welcher Reihenfolge soll ich sie installieren?"

3. Integration in Next.js und Vite

shadcn/ui funktioniert mit beiden gängigen React-Setups. Bei Next.js (App Router) läuft npx shadcn@latest init direkt durch — shadcn erkennt das Framework und konfiguriert Pfade und Imports entsprechend.

Bei Vite ist ein kurzer Zwischenschritt nötig: Vite verwendet @-Aliases nicht standardmäßig. Du musst vite.config.ts und tsconfig.json anpassen, bevor shadcn die Komponenten korrekt ablegt. Claude Code erledigt das mit einer Anweisung:

claude "Ich nutze Vite mit React und TypeScript. Konfiguriere das
@-Alias so, dass shadcn/ui korrekt installiert werden kann."

Claude Code liest vite.config.ts und tsconfig.json, ergänzt den Alias-Eintrag an beiden Stellen und installiert falls nötig @types/node für den path-Import. Das sind drei Dateien, drei Stellen — Claude Code macht es in einem Schritt fehlerfrei.

4. Komponenten anpassen mit Tailwind und CSS-Variablen

Weil die Komponenten in deinem Projekt leben, kannst du sie direkt bearbeiten. shadcn nutzt ein durchdachtes System aus CSS-Variablen für Farben, das Theming radikal vereinfacht. Alle Farbwerte stehen in globals.css:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  /* ... */
}

Möchtest du das primäre Farbschema deiner Marke verwenden, änderst du diese Variablen einmal — alle Komponenten übernehmen das neue Schema automatisch. Claude Code kann ausgehend von einem Hex-Wert oder einer Markenbeschreibung die passenden HSL-Werte berechnen und eintragen:

claude "Meine Markenfarbe ist #2563EB (Blau). Berechne die passenden
shadcn CSS-Variablen für primary, primary-foreground und ring und
trage sie in globals.css ein."

5. Formulare mit react-hook-form und Zod

Das mächtigste Zusammenspiel von shadcn/ui ist die Kombination der Form-Komponente mit react-hook-form für State-Management und zod für Schema-Validierung. Das Ergebnis: typsichere Formulare mit konsistenter Fehleranzeige, ohne eine Zeile Custom-Validierungslogik.

Zuerst die Abhängigkeiten:

npx shadcn@latest add form
npm install react-hook-form zod @hookform/resolvers

Ein typisches Registrierungsformular sieht dann so aus:

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const formSchema = z.object({
  email: z.string().email("Ungültige E-Mail-Adresse"),
  name: z.string().min(2, "Name muss mindestens 2 Zeichen haben"),
})

export function RegisterForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: { email: "", name: "" },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    // values ist vollständig typisiert
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>E-Mail</FormLabel>
              <FormControl><Input {...field} /></FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Registrieren</Button>
      </form>
    </Form>
  )
}

Claude Code kann das Zod-Schema direkt aus einer Beschreibung generieren — und dabei Dinge berücksichtigen, die man selbst leicht vergisst:

claude "Erstelle ein Zod-Schema für ein Checkout-Formular mit Name,
E-Mail, Lieferadresse (Straße, PLZ, Stadt, Land) und optionaler
Telefonnummer. Validierung soll sicherstellen, dass PLZ 5 Ziffern hat
und Land ein gültiger ISO-3166-1-alpha-2-Code ist."

6. Dark Mode mit next-themes

shadcn/ui ist von Grund auf für Dark Mode ausgelegt. Die CSS-Variablen haben separate Definitionen für .dark-Klasse — du musst nur dafür sorgen, dass diese Klasse korrekt am html-Element gesetzt wird. Das übernimmt next-themes:

npm install next-themes

// app/layout.tsx
import { ThemeProvider } from "next-themes"

export default function RootLayout({ children }) {
  return (
    <html lang="de" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Der Toggle ist dann eine einfache Komponente, die useTheme() aus next-themes verwendet. Claude Code generiert dir eine vollständige, barrierefreie Theme-Toggle-Komponente mit Icon-Wechsel zwischen Sonne und Mond:

claude "Erstelle eine ThemeToggle-Komponente für shadcn/ui mit next-themes.
Die Komponente soll einen Button mit Icon zeigen (Sonne/Mond je nach Theme)
und einen Dropdown mit Light/Dark/System-Option — wie es shadcn/ui in
ihrer eigenen Dokumentation verwendet."

7. Wie Claude Code bei shadcn/ui konkret hilft

Das eigentliche Problem mit shadcn/ui ist nicht die Lernkurve — die Dokumentation ist hervorragend. Das Problem ist der Overhead bei Routinearbeit: dieselben Patterns immer wieder schreiben, Komponenten zusammenfügen, Zod-Schemas für ähnliche Formulare aufbauen, CSS-Variablen anpassen.

Claude Code beschleunigt genau diesen Teil. Konkrete Einsatzfälle:

• Komponentenauswahl: Beschreibe dein UI-Element, Claude Code empfiehlt die richtige shadcn-Kombination und den Installationsbefehl
• Schema-Generierung: Aus einer Feldbeschreibung wird ein typsicheres Zod-Schema mit sinnvollen Validierungsregeln und deutschen Fehlermeldungen
• Theme-Anpassung: Markenfarbe als Hex eingeben, Claude Code berechnet HSL-Werte und trägt sie in globals.css ein
• Dark-Mode-Setup: Vollständige Einrichtung mit next-themes, ThemeProvider und Toggle-Komponente in einem Schritt
• Komponentenanpassung: Bestehende shadcn-Komponenten um eigene Props, Varianten oder Verhalten erweitern — Claude Code liest den vorhandenen Code und erweitert ihn konsistent

"Ich brauche eine DataTable-Komponente mit Sortierung, Paginierung und einer Checkbox-Spalte für Bulk-Aktionen — basierend auf shadcn/ui Table und TanStack Table." Claude Code liest deine bestehenden Komponenten, wählt die richtigen shadcn-Bausteine aus und generiert eine vollständige, typisierte Implementierung.

Was Claude Code nicht ersetzt: das Verständnis dafür, welche Radix-Primitive hinter einer shadcn-Komponente stecken und welche Accessibility-Attribute sie mitbringt. Das ist Wissen, das du einmal aufbauen solltest — danach beschleunigt Claude Code die Umsetzung.

Zwei verwandte Artikel, die auf diesem Thema aufbauen:

• Claude Code Debugging — wie du mit Claude Code Bugs systematisch findest statt per Trial-and-Error
• Claude Code für Unternehmen — Deployment, Zugriffskontrolle und Team-Workflows auf Unternehmensebene