Liorith SystemDesign System
Liorith Design System

Bausteine
mit Haltung.

Eine lebendige Bibliothek für die Produkte im Liorith Network. Die Ausstellung erklärt Form und Zweck, die Docs zeigen echte Zusammensetzungen und der Code-Modus macht die öffentliche API sofort nutzbar.

34 Komponenten9 Markenfarben3 Themes
Exponate

Komponenten zum Anfassen.

Die Specimens bleiben die Quelle der Wahrheit. Jede Karte erklärt jetzt ihren Zweck und führt direkt zu einer detaillierten Seite mit Einsatzregel, Import und Live-Beispiel.

01KomponenteTypography

Schriftrollen, Größen und Handschriften für eine klare Markenstimme.

Specimen und Referenz öffnen
02KomponenteSliding Tabs

Eine bewegte Umschaltung für wenige gleichwertige Ansichten.

Specimen und Referenz öffnen
03KomponenteDropdown

Kompakte Auswahl und Aktionen mit kontrollierter Offenlegung.

Specimen und Referenz öffnen
04KomponenteButtons

Aktionen mit klarer Hierarchie von solid bis ghost.

Specimen und Referenz öffnen
05KomponenteButton Row

Mehrere Buttons als eine zusammenhängende Fläche, waagerecht oder senkrecht.

Specimen und Referenz öffnen
06KomponenteInputs

Eingabemuster für Text, Datum und Zeit inklusive lesbarer Zustände.

Specimen und Referenz öffnen
07KomponenteForm Controls

Auswahlmuster für Entscheidungen mit wenigen, klaren Optionen.

Specimen und Referenz öffnen
08KomponenteSlider

Regler für kontinuierliche Werte mit direktem Feedback.

Specimen und Referenz öffnen
09KomponenteBadges

Kleine Status- und Bedeutungsträger innerhalb einer Informationshierarchie.

Specimen und Referenz öffnen
10KomponenteTags

Kompakte Marker für Kategorien, Zustände und Bereichszugehörigkeit.

Specimen und Referenz öffnen
11KomponenteAvatar

Identität und Präsenz für Personen, Teams und automatisch erzeugte Platzhalter.

Specimen und Referenz öffnen
12KomponenteSpinner

Kompaktes Feedback für kurze, laufende Prozesse.

Specimen und Referenz öffnen
13KomponenteAlerts

Kontextuelle Hinweise für Erfolg, Information, Warnung und Fehler.

Specimen und Referenz öffnen
14KomponenteProgress

Fortschrittsanzeige für bekannte oder geschätzte Prozesslängen.

Specimen und Referenz öffnen
15KomponenteTooltip

Zusatzinformation auf Abruf, ohne den Arbeitsfluss zu überladen.

Specimen und Referenz öffnen
16KomponenteAccordion

Aufklappbare Informationsgruppen für selten benötigte Details.

Specimen und Referenz öffnen
17KomponenteModal

Fokussierter Dialog für wichtige Entscheidungen oder Unterbrechungen.

Specimen und Referenz öffnen
18KomponenteDrawer

Seitliches Panel für Nebenschauplätze, die den Hauptinhalt nicht verdrängen.

Specimen und Referenz öffnen
19KomponenteContext Menu

Kontextabhängige Aktionen direkt am betroffenen Objekt.

Specimen und Referenz öffnen
20KomponenteMenu Button

Aktionen am Button statt am Rechtsklick — als Dreipunkt oder geteilter Button.

Specimen und Referenz öffnen
21KomponenteCommand Palette

Suche und Befehle in einem Overlay, erreichbar per Tastenkürzel.

Specimen und Referenz öffnen
22KomponenteCard

Ruhige Inhaltsfläche mit Header, Körper und optionalem Abschluss.

Specimen und Referenz öffnen
23KomponenteBlog Card

Editoriale Vorschau für Beiträge, Updates und längere Inhalte.

Specimen und Referenz öffnen
24KomponenteMedia

Bilder, Galerien und Reels für visuelle Inhalte mit kontrollierter Vergrößerung.

Specimen und Referenz öffnen
25KomponenteTable

Dichte, vergleichbare Daten mit klarer Spaltenlogik.

Specimen und Referenz öffnen
26KomponenteChart

Verlauf und Vergleich als Linie, Fläche oder Balken — mit Tabellenansicht.

Specimen und Referenz öffnen
27KomponenteToast

Flüchtige Rückmeldung für erfolgreich ausgeführte Aktionen.

Specimen und Referenz öffnen
28KomponenteBreadcrumbs

Pfad und Orientierung für verschachtelte Bereiche und Detailansichten.

Specimen und Referenz öffnen
29KomponentePagination

Seitennavigation für klar abgegrenzte längere Listen.

Specimen und Referenz öffnen
30KomponenteSidebar

Stabile Navigation für größere Werkzeug- und Bibliotheksbereiche.

Specimen und Referenz öffnen
31KomponenteCalendar

Visuelle Auswahl und Darstellung zeitbezogener Informationen.

Specimen und Referenz öffnen
32KomponenteLrthCodeBox

Kopierbare technische Referenz mit sprachlichem Kontext und Statusrückmeldung.

Specimen und Referenz öffnen
33KomponenteCopy Field

Ein Wert, der nur über den Button in die Zwischenablage geht.

Specimen und Referenz öffnen
34KomponenteColor System

Semantische Tokens, Markenfarben und Materialfamilien als gemeinsames Farbsystem.

Specimen und Referenz öffnen