Komponentenschichten#

Das Theme kombiniert vier Technologien: Radix UI, KERN-UX, shadcn/ui und Tailwind CSS. Diese Seite erklärt, warum alle vier eingesetzt werden und wie sie zusammenspielen.

Die vier Schichten#

Radix UI — Verhalten#

Radix UI ist eine Headless-Bibliothek: sie liefert ausschließlich Interaktionsverhalten, kein Styling. Der Fokus liegt auf komplexen UI-Mustern, bei denen korrekte Barrierefreiheit schwer von Hand umzusetzen ist — Dialoge, Dropdowns, Tabs, Tooltips, Collapsibles.

Radix UI setzt ARIA-Rollen automatisch, verwaltet den Tastaturfokus und folgt den WAI-ARIA Design Patterns. Im Browser ist davon nichts zu sehen — keine Farben, keine Abstände, keine Klassen.

KERN-UX — Design der öffentlichen Verwaltung#

KERN-UX ist das offizielle Design System der öffentlichen Verwaltung. Es definiert Farben, Typografie, Abstände und Formularkomponenten.

KERN-UX-Komponenten decken vor allem statische und formularbasierte Elemente ab: Buttons, Inputs, Alerts, Kopfzeile. Für komplexe interaktive Muster (Fokus-Trapping, Menü-Navigation) ist KERN-UX nicht ausgelegt — das übernimmt Radix UI.

shadcn/ui — die Verbindung#

shadcn/ui verbindet Radix UI mit einem Styling-Layer. Es nimmt Radix-UI-Primitiven und ergänzt sie mit Tailwind-Klassen und CSS-Variablen in der shadcn-Namenskonvention (--primary, --background, --border etc.).

Das Ergebnis: interaktive Komponenten, die zugänglich (Radix UI) und visuell anpassbar (CSS-Variablen) sind — bereit für die Integration in das KERN-UX-Design.

Tailwind CSS — Utilities#

Tailwind CSS wird für Layout, Abstände und komponenteninternes Styling verwendet. Die Tailwind-Konfiguration liest dieselben CSS-Variablen wie shadcn/ui, sodass eigene Utility-Klassen automatisch zum Theme passen.

Die Theme Bridge#

Das entscheidende Verbindungsstück ist theme-bridge.css. Sie löst das Problem, dass shadcn/ui und KERN-UX unterschiedliche CSS-Variablen-Namenskonventionen verwenden:

• shadcn/ui erwartet --primary, --background, --border etc.
• KERN-UX setzt --kern-color-action-default, --kern-color-layout-background-default etc.

Die Theme Bridge mappt eine Seite auf die andere. Entwickler:innen setzen nur die einfachen shadcn-Variablen — die Bridge übersetzt sie automatisch in alle KERN-UX-Tokens:

Dasselbe gilt für Abstände (--spacing-base → alle --kern-metric-space-*), Rundungen (--radius → alle --kern-metric-border-radius-*) und Typografie (--font-size-ratio → modulare Schriftgrößenskala).

Zusammenfassung#

Radix UI          → barrierefreies Interaktionsverhalten (headless)
    ↓
shadcn/ui         → Styling-Layer über Radix UI (Tailwind + CSS-Variablen)
    ↓
theme-bridge.css  → shadcn-Variablen → KERN-UX-Tokens
    ↓
KERN-UX           → Design der öffentlichen Verwaltung

Tailwind CSS läuft parallel zu shadcn/ui und liest dieselben CSS-Variablen für Utility-Klassen.