Die zentrale UI-Grundlage für deine Web-Apps: Design-Tokens, 14 Theme-Varianten (Hell/Dunkel), barrierearme Komponenten (React · Tailwind · Radix) und App-Vorlagen — alles in einem konsistenten App-Design.
14 Themes
Subtil, Neutral, Charakter — je Hell & Dunkel, live umschaltbar.
Komponenten
Primitives bis Datentabellen & App-Shell — token-basiert.
Wiederverwendbar
Paket im Monorepo, per Plugin/Skill in neue Projekte klonbar.
Getting Started
1. Abhängigkeit
"@devui/design-system": "*" // Workspace oder Klon
import '@devui/design-system/styles/globals.theme.css'
import { initTheme } from '@devui/design-system'
initTheme()
4. Nutzung
import { Button, ThemeSwitcher, cn } from '@devui/design-system'
Foundations
Farb-Tokens
Typografie
Schrift · Überschriften font-heading
Schrift · Fließtext font-sans
Schrift · Code / IDs font-mono
Radius & Schatten
rounded-sm
rounded-md
rounded-lg
shadow-subtle
shadow-card
Icons (lucide-react)
Farbpaletten
14 Varianten in drei Gruppen, je Hell/Dunkel. Klick wendet das Theme live auf die ganze Plattform an. Vorschaufarben werden live aus globals.theme.css gelesen.
Meine Paletten
Kontrast-Matrix (aktives Theme)
Paletten erstellst, speicherst und verwaltest du im → Bibliothek.
Icons
Komplette lucide-Bibliothek nach Kategorie. Tippen filtert, Klick kopiert den Namen (z. B. data-lucide="search").
Kategorien
…
Theme-Generator
Vollständiger Token-Editor: Farben, High-End-Typografie (Skala, Rhythmus, OpenType/Variable), Radius & Schatten — live und als kompletter CSS-Export.
Theme-VerwaltungBearbeiten
Schnell-Stil (shadcn)
Ein-Klick-Steuerungen fuer den Generator-Entwurf. Wirken live auf die App, sobald oben „Generator-Entwurf“ als App-Theme gewaehlt ist. CSS unten exportierbar.
Style
Radius
Base Color
Theme (Akzent)
Chart Color
Icon Library
Heading
Font
Farben — Hell
Farben — Dunkel
Farbpaletten — High-End (OKLCH)
Perzeptueller Farbraum, Tonleitern (50–950 bzw. 12 Stufen), eine Markenfarbe erzeugt die komplette Palette. Hell/Dunkel perzeptuell abgeleitet (kein reines Invertieren: gedämpfte Sättigung, Elevation über Helligkeit, Off-White-Text). WCAG AA verbindlich, APCA als Qualitätshinweis, Farbsehschwäche-Vorschau.
Jede Stufe erhält optisch abgestimmte Zeilenhöhe und Laufweite (größer = enger), wie in Material 3 / modernen Skalen. Werte überschreibbar; ↺ stellt die optische Vorgabe wieder her.
Typografie — Textrollen (Material 3)
Semantische Composite-Stile (Display/Headline/Title/Body/Label × L/M/S) aus Familie · Größe · Zeilenhöhe · Laufweite · Gewicht. Als CSS-Klassen .r-display-lg … exportierbar.
Typografie — Rhythmus & Gewichte
Erweitert: OpenType, Variable Fonts & Rendering
Schriftmuster (Specimen)
Overline · Eyebrow
Aa Überschrift Display
H2 — Abschnittstitel
H3 — Unterabschnitt
H4 — kleinere Ebene
The quick brown fox jumps over the lazy dog. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Dieser Absatz zeigt Zeilenhöhe, Laufweite und die maximale Zeilenlänge (Measure) für angenehmes Lesen.
„Gute Typografie ist unsichtbar." — Specimen-Zitat
Caption / Bildunterschrift · 1234567890
Umsatz
1.234.567,89
Kosten
987.654,30
Saldo
246.913,59
const total = items.reduce((a,b)=>a+b, 0) // tabular & mono
Enthält alle Token (Farben, Radius/Schatten, vollständige Typografie inkl. fluid clamp) sowie Schrift-<link> + Tailwind-fontFamily/fontSize/lineHeight/letterSpacing/fontWeight.
Komponenten
Links filtern & wählen, rechts die vollständige Doku: Varianten, Zustände, Props, Barrierefreiheit und Code.
Login-Vorlagen
Vollständige Seiten-Vorlagen (Start: Login/Authentifizierung) — alle untereinander. Reine Design-Demos, keine echte Anmeldung. Hell/Dunkel über den Umschalter oben rechts; „Neuer Tab“ öffnet die Vorlage als eigenständige Seite in einem neuen Browser-Tab.
Appshell-Vorlagen
Vollständige Anwendungs-Layouts für Enterprise-Apps — Shell, Navigation und Inhaltsbereich als Klick-Dummys. Hell/Dunkel über den Umschalter oben rechts; „Neuer Tab“ öffnet die Vorlage als eigenständige Seite in einem neuen Browser-Tab.
Aufbau & Seiten
Wie eine typische Enterprise-Anwendung mit DevUI grundsätzlich aufgebaut ist: die App-Shell, die Inhalts-Modi, die wiederkehrenden Seitenmuster („Floorplans"), das Seiteninventar und die Designsprache. Belegt aus apps/web/src (TanStack Router, dateibasiert).
1App-Shell (Grundgerüst)
Klassische Enterprise-Workspace-Shell (nah an SAP Fiori / Notion): durchgehende, in der Breite ziehbare Sidebar links, fixe Kopfzeile oben, darunter die Arbeitsfläche mit dem Router-Outlet. Definiert als flex h-screen in routes/__root.tsx.
<main id="content"> mit Outlet; Vollbild-Modus blendet Sidebar + Header aus.
Beleg: apps/web/src/routes/__root.tsx (AppShell) · Sidebar-Bäume in components/layout/ (CustomSidebar, Ablage-/Workspace-Tree).
2Zwei Inhalts-Modi
Eine zentrale Entscheidung der Shell: Seiten rendern entweder randlos (Full-Bleed) und bringen ihr eigenes Layout/Scrolling mit, oder sie bekommen einen einheitlichen gepolsterten Standard-Container. Gesteuert über das FULL_BLEED-Set im Root.