Reihe

layout.cluster · v1.0.0 Horizontale Reihe mit Umbruch (Buttons, Badges, Meta-Zeilen) — wrappt fluid ohne Media Query WebsiteAppDesktopE-Mail

Spalten

layout.columns · v1.0.0 Zwei benannte Spalten mit Verhältnis (1:1, 2:1, 1:2) — stapeln mobil untereinander WebsiteAppDesktop

Effekt-Rahmen

layout.effect-frame · v1.0.0 Hülle mit dekorativem Hintergrund oder Rand für beliebige Inhalte: laufender Rand-Glanz, Punkt-/Linien-Raster oder Verlaufs-Schein — alle Effekte aus Tokens und mit prefers-reduced-motion-Rückfall WebsiteAppDesktop

Raster

layout.grid · v1.1.0 Zwölf-Spalten-Raster. Kinder bestimmen ihre Breite über node.layout.span; ohne Angabe gilt die Vorgabe aus dem columns-Prop. WebsiteAppDesktop

Stapel

layout.stack · v1.1.0 Vertikaler Stapel mit Token-Abstand — das Grundlayout für untereinander stehende Inhalte WebsiteAppDesktopE-Mail

Quellen-Marker (Inline Citation)

ui.inline-citation · v1.0.0 Hochgestellter Quellen-Verweis im Fließtext — verlinkt auf den passenden Eintrag in component.sources, mit Titel als Tooltip AppDesktop

Button

ui.button · v1.0.0 Auslöser für Aktionen — emittiert das semantische Event activate WebsiteAppDesktop

Checkbox

ui.checkbox · v1.0.0 Checkbox mit Label, Zuständen (disabled, invalid) und Formular-Tokens WebsiteAppDesktop

Eingabefeld

ui.input · v1.0.0 Einzeiliges Formularfeld mit Label, Zuständen (disabled, invalid) und Formular-Tokens WebsiteAppDesktop

Radio-Gruppe

ui.radio-group · v1.0.0 Radiobutton-Gruppe mit Optionen-Array — Gruppen-Logik im Element gelöst (ein name, eine Auswahl) WebsiteAppDesktop

Auswahlfeld

ui.select · v1.0.0 Auswahlfeld (native select) mit Optionen-Array, Zuständen und Formular-Tokens WebsiteAppDesktop

Schalter

ui.switch · v1.0.0 An/Aus-Schalter (Toggle) — checkbox-Semantik mit Switch-Optik über Tokens WebsiteAppDesktop

Mehrzeiliges Textfeld

ui.textarea · v1.0.0 Mehrzeiliges Formularfeld mit Label, Zuständen und Formular-Tokens WebsiteAppDesktop

Button-Gruppe

ui.button-group · v1.0.0 Segmentierte Button-Gruppe (Untitled-UI-Muster): verbundene Secondary-Buttons mit geteilten Rändern, aktives Segment hervorgehoben WebsiteAppDesktop

Icon-Knopf

ui.icon-button · v1.0.0 Reiner Icon-Button (Utility-Button): Varianten secondary/ghost/gefahr, Pflicht-aria-label, emittet activate WebsiteAppDesktop

Schieberegler (Slider)

ui.slider · v1.0.0 Nativer Range-Slider mit Token-Styling und Live-Wertanzeige — funktioniert ohne JS, Controller aktualisiert Anzeige und emittet change WebsiteAppDesktop

Avatar

ui.avatar · v1.0.0 Bild oder Initialen einer Person mit optionalem Status WebsiteAppDesktopE-Mail

Überschrift

ui.heading · v1.0.0 Überschrift der Ebenen 1–4 WebsiteAppDesktopE-Mail

Icon

ui.icon · v1.0.0 Kuratiertes Inline-SVG-Icon-Set (Whitelist) — Größen über icon-Tokens, Farbe über currentColor/Ton WebsiteAppDesktopE-Mail

Bild

ui.image · v1.0.0 Bild mit URL-Whitelist, Seitenverhältnis und Platzhalter-Fallback bei unsicherer Quelle WebsiteAppDesktopE-Mail

Listen-Zeile (Item)

ui.item · v1.0.0 Universelle Listen-Zeile: Icon/Avatar-Fläche, Titel + Untertitel, Meta rechts, optionaler Chevron — Grundbaustein für Listen, Suchergebnisse, Auswahllisten WebsiteAppDesktop

Link

ui.link · v1.0.0 Textlink mit URL-Whitelist — echte href-Navigation bleibt immer die Rückfallebene WebsiteAppDesktopE-Mail

Rich Text

ui.richtext · v1.0.0 Formatierter Text aus dem Editor — wird serverseitig gegen die Whitelist sanitisiert WebsiteAppDesktopE-Mail

Text

ui.text · v1.0.0 Fließtext-Absatz mit Ton und Größe WebsiteAppDesktopE-Mail

Trennlinie

ui.divider · v1.0.0 Horizontale Trennlinie, optional mit zentriertem Beschriftungstext WebsiteAppDesktopE-Mail

Ankündigungs-Pille

ui.announcement · v1.0.0 Pill-Banner über einer Überschrift (Beispiel: Neu · Version 2 ist da): Markierung links, Text, optionaler Pfeil — als Link oder statisch WebsiteAppE-Mail

Preis

ui.price · v1.0.0 Shop-Preiszeile: Betrag (bei Streichpreis automatisch in Sale-Farbe), Streichpreis, Rabatt-Badge — Sale-Ton über den themebaren color.sale-Token WebsiteApp

Mengen-Stepper

ui.quantity-stepper · v1.0.0 Mengenwahl mit −/+ und Zahleneingabe — progressive (Input funktioniert ohne JS), Controller klemmt auf min/max und emittet change WebsiteApp

Sterne-Bewertung

ui.rating · v1.1.0 Rating-Anzeige 0–5 mit Teilsternen (Breiten-Maske, kein JS) und optionaler Anzahl — Farben über status.warning-/Sale-Tokens WebsiteApp

Varianten-Swatch

ui.swatch · v1.0.0 Farb-/Bild-Kachel für Produktvarianten. Die Produktfarbe ist ein CONTENT-Datum (Prop), kein Design-Token — Auswahl-Ring und Maße kommen aus Tokens WebsiteApp

Badge

ui.badge · v2.1.0 Status- oder Kategorie-Kennzeichen. BREAKING 2.0.0: Prop tone heißt jetzt variant (Migration 1-to-2 vorhanden) WebsiteAppDesktopE-Mail

Chip

ui.chip · v1.1.0 Filter-/Auswahl-Chip — im Element Builder generiert (Archetyp box) WebsiteAppDesktop

Icon-Fläche (Featured Icon)

ui.featured-icon · v1.0.0 Icon auf getönter runder/eckiger Fläche (Untitled-UI-Muster Featured Icon) — Töne aus Status-/Primary-Tokens per color-mix abgeleitet WebsiteAppDesktop

Fortschrittsbalken

ui.progress · v1.0.0 Fortschrittsbalken (determiniert oder unbestimmt) mit Tönen und optionaler Wertanzeige WebsiteAppDesktop

Skeleton

ui.skeleton · v1.1.0 Lade-Platzhalter (schimmernde Fläche) für Text, Blöcke und Kreise WebsiteAppDesktop

Ladeindikator

ui.spinner · v1.0.0 Rotierender Ladeindikator mit Größen und Screenreader-Label WebsiteAppDesktop

Status-Anzeige

ui.status · v1.0.0 Zustands-Punkt mit Beschriftung (online, beeinträchtigt, offline, wartend) — Punkt pulsiert optional; Farben aus Status-Tokens WebsiteAppDesktopE-Mail

Agenten-Karte

component.agent-card · v1.0.0 Steckbrief eines Agenten: Name, Rolle, Zustand, Modell, Werkzeug-Badges und Kennzahlen — für Agenten-Übersichten und Team-Ansichten AppDesktop

Gedankenkette

component.chain-of-thought · v1.0.0 Zeitleiste der Denk-Schritte eines Agenten: Schritt-Punkte mit Titel, Detailtext und optionaler Quellen-/Werkzeug-Angabe — als Ganzes einklappbar AppDesktop

Wiederherstellungspunkt

component.checkpoint · v1.0.0 Marke im Verlauf, zu der zurückgesprungen werden kann: Linie mit Label, Zeitangabe und Zurücksetzen-Knopf AppDesktop

Freigabe (Human-in-the-Loop)

component.confirmation · v1.0.0 Rückfrage vor einer folgenreichen Agenten-Aktion: Beschreibung, Details-Liste, Zustimmen/Ablehnen — nach der Wahl bleibt die Entscheidung sichtbar AppDesktop

Kontext-Anzeige

component.context · v1.0.0 Auslastung des Kontextfensters: Balken mit belegten/freien Token, Warn-Ton ab Schwellwert, optional Kosten und Modell-Angabe AppDesktop

Konversation (Chat-Container)

component.conversation · v1.1.0 Scrollender Chat-Verlauf: hält den Blick am unteren Rand, zeigt beim Hochscrollen einen Zurück-nach-unten-Knopf — nimmt Nachrichten und AI-Bausteine im Slot auf AppDesktop

Nachricht (Chat)

component.message · v1.0.0 Chat-Nachricht: Nutzer als Blase rechts, Assistent als Fließtext links mit Avatar; optionale Anhänge, Aktions-Leiste (Kopieren, Bewerten, Neu erzeugen) und Zeitstempel AppDesktop

Modell-Wahl

component.model-selector · v1.0.0 Kompakte Modell-Auswahl für die Chat-Leiste: aktuelles Modell als Knopf, Panel mit Anbieter-Gruppen, Beschreibung und Merkmal-Badges AppDesktop

Plan (Agenten-Vorhaben)

component.plan · v1.0.0 Vorhaben eines Agenten vor der Ausführung: nummerierte Schritte mit Werkzeug-Angabe und Zustand, optional Freigabe-Leiste am Fuß AppDesktop

Prompt-Eingabe

component.prompt-input · v1.1.0 Chat-Eingabe: mitwachsendes Textfeld, Enter sendet (Umschalt+Enter = Zeilenumbruch), Werkzeugleiste (Anhang, Modell) und Senden/Stop-Knopf AppDesktop

Warteschlange

component.queue · v1.0.0 Anstehende Aufträge eines Agenten: Position, Titel, Zustand (wartet/läuft) und Entfernen-Knopf — für Batch-Läufe und Hintergrund-Aufgaben AppDesktop

Denkprozess (Reasoning)

component.reasoning · v1.0.0 Einklappbarer Denk-Block des Modells: Kopfzeile mit Dauer und Zustand (denkt / fertig), Inhalt als gedämpfter Text — natives details/summary, kein JS nötig AppDesktop

Quellen

component.sources · v1.0.0 Einklappbare Quellenliste unter einer Antwort: nummerierte Einträge mit Titel, Domain und optionalem Auszug — passend zu ui.inline-citation im Text AppDesktop

Vorschläge

component.suggestion · v1.0.0 Anschluss-Fragen als Pillen unter der Antwort oder über der Eingabe — Klick meldet den Text zur Übernahme in die Prompt-Eingabe AppDesktop

Aufgaben-Liste (Task)

component.task · v1.0.0 Was der Agent gerade abarbeitet: Aufgaben mit Zustand (offen/läuft/fertig/Fehler), optionalen Unterpunkten und Fortschritts-Zeile AppDesktop

Werkzeug-Aufruf (Tool Call)

component.tool · v1.0.0 Aufruf eines Agenten-Werkzeugs: Name, Zustand (wartet/läuft/fertig/Fehler), einklappbare Eingabe- und Ergebnis-Blöcke — natives details, kein JS AppDesktop

Hinweis

component.alert · v1.0.0 Hinweis-Box in vier Tönen mit Icon, optional schließbar WebsiteAppDesktopE-Mail

Brotkrumen

component.breadcrumb · v1.0.0 Pfadnavigation (items-Array, letzter Eintrag = aktuelle Seite ohne Link) WebsiteAppDesktop

Dropdown-Menü

component.dropdown · v1.0.0 Auslöser-Button mit Aktionsmenü — Outside-Click und Escape schließen, select als semantisches Event WebsiteAppDesktop

Seitennavigation

component.pagination · v1.0.0 Blättern durch Seiten (Fenster mit Auslassungen) — navigate mit Seitenzahl als Payload WebsiteAppDesktop

Tabelle

component.table · v1.1.0 Datentabelle aus columns/rows-Props — gestreift, dicht, mobil horizontal scrollbar WebsiteAppDesktopE-Mail

Tabs

component.tabs · v1.0.0 Reiter mit Panels (bis 4) — lokaler Zustand im Controller, semantisches Event change WebsiteAppDesktop

Aktivitäts-Raster (Heatmap)

component.activity-heatmap · v1.0.0 Jahres-Raster nach GitHub-Muster: eine Kachel je Tag, Intensität in fünf Stufen aus einem Ton-Token, Wochentag- und Monats-Beschriftung, Legende und Gesamtzahl AppDesktop

Diagramm

component.chart · v1.0.0 Diagramm auf ApexCharts (lokal ausgeliefert, kein CDN): Linie, Balken, Fläche, Kreis, Ring, Radar. Farben und Schrift werden zur Laufzeit aus den Design-Tokens gelesen, ein Theme-Wechsel färbt mit. Ohne JavaScript bleibt eine lesbare Wertetabelle stehen WebsiteAppDesktop

Vorher/Nachher-Vergleich

component.comparison · v1.0.0 Zwei Fassungen übereinander mit Schieberegler: Vorher links, Nachher rechts, Griff per Maus/Tastatur — für Bild- oder Text-Vergleiche WebsiteAppDesktop

Gantt (Zeitplan)

component.gantt · v1.0.0 Projekt-Zeitplan als Balkendiagramm: Zeilen mit Aufgaben, Zeitachse in Tagen/Wochen, farbige Balken (Ton aus Tokens), Fortschritts-Füllung, Heute-Linie und Meilenstein-Rauten AppDesktop

Mini-Kalender (Tagesstreifen)

component.mini-calendar · v1.0.0 Kompakter Tagesstreifen für Kopfleisten: waagerechte Tage mit Wochentag, Markierungs-Punkten für Termine, Blättern vor/zurück — Auswahl meldet das Datum AppDesktop

Sortierbare Liste

component.sortable-list · v1.0.0 Liste mit Gruppen, deren Einträge per Ziehen oder Tastatur (Pfeile mit Strg) umsortiert und zwischen Gruppen verschoben werden — meldet jede Umsortierung AppDesktop

Verlaufslinie (Sparkline)

component.sparkline · v1.0.0 Kleine Verlaufsgrafik ohne Achsen für Kennzahl-Karten und Tabellenzellen — reines Inline-SVG, KEINE Diagramm-Bibliothek nötig; Farbe aus Tokens, Wertetabelle als Rückfall entfällt (Werte stehen im aria-label) WebsiteAppDesktop

Auswahl-Karten (Choicebox)

component.choice-box · v1.0.0 Radio- oder Mehrfachauswahl als Karten mit Titel, Beschreibung, optionalem Icon und Badge — Tastatur-fähig, emittiert selection WebsiteAppDesktop

Combobox (Select mit Suche)

component.combobox · v1.0.0 Einzelauswahl mit Suchfilter und Options-Panel: Tastatur-Navigation (Pfeile/Enter), Escape/Außenklick schließen, optionale Beschreibungen pro Option WebsiteAppDesktop

Datumswahl (Date Picker)

component.date-picker · v1.0.0 Datums-Eingabe mit Popover-Kalender (Monatsraster, Vor/Zurück, Heute markiert, Mo-So) — progressive: Textfeld TT.MM.JJJJ funktioniert ohne JS, emittet change WebsiteAppDesktop

Text-Editor (Eingabe)

component.editor · v1.0.0 Rich-Text-EINGABE mit Werkzeugleiste (fett, kursiv, unterstrichen, Überschrift, Listen, Zitat, Code, Link) — erzeugt genau das HTML, das der Sanitizer erlaubt; Gegenstück zur Anzeige ui.richtext AppDesktop

Datei-Upload (Dropzone)

component.file-upload · v1.0.0 Upload-Zone (Untitled-UI-Muster): Klick oder Drag-and-Drop, Dateiliste mit Größe und Entfernen — Prototyp ohne Server-Upload, emittet dateien WebsiteAppDesktop

Filterleiste

component.filter-bar · v1.0.0 Filter-Bar über Tabellen/Listen: Suchfeld + Filter-Buttons mit Options-Panels + Zurücksetzen — Controller pflegt aktive Filter, emittet filter WebsiteAppDesktop

Mehrfach-Select

component.multi-select · v1.0.0 Multi-Select mit Chips im Feld, Suchfilter und Options-Panel (Untitled-UI-Muster) — Controller pflegt Auswahl, Escape/Außenklick schließen, emittet auswahl WebsiteAppDesktop

Tag-Eingabe

component.tag-input · v1.0.0 Freie Schlagwort-Eingabe: Enter/Komma legt einen Chip an, Backspace im leeren Feld entfernt den letzten, optionale Vorschlagsliste — emittiert tags WebsiteAppDesktop

Code-Block

component.code-block · v1.0.0 Quelltext-Anzeige mit Kopfzeile (Dateiname/Sprache), optionalen Zeilennummern und Kopieren-Knopf — Syntax-Töne über Tokens, kein Highlighter zur Laufzeit WebsiteAppDesktop

Befehls-Schnipsel

component.snippet · v1.0.0 Einzeiliger Befehl mit Prompt-Zeichen und Kopieren-Knopf, optional mit Reitern (npm/pnpm/yarn) — Docs- und Onboarding-Baustein WebsiteAppDesktop

Terminal (Ausgabe)

component.terminal · v1.0.0 Terminal-Fenster mit Fenster-Punkten und Zeilen-Typen (Befehl, Ausgabe, Erfolg, Fehler, Hinweis); Zeilen erscheinen nacheinander (abschaltbar, respektiert prefers-reduced-motion) WebsiteAppDesktop

Video-Spieler

component.video-player · v1.0.0 Video mit eigener Bedienleiste aus Tokens: Abspielen/Pause, Fortschritt mit Klick-Sprung, Zeitangabe, Ton, Vollbild — nutzt das native video-Element, kein Fremd-Player WebsiteAppDesktop

Einlaufende Liste

component.animated-list · v1.0.0 Liste, deren Einträge nacheinander einlaufen (Benachrichtigungs-Demos, Feature-Aufzählungen): Icon-Fläche, Titel, Text, Zeit — mit prefers-reduced-motion-Rückfall WebsiteAppDesktop

Befehlsmenü (Cmd+K)

component.command-menu · v1.0.0 Command-Menu: Strg/Cmd+K oder Öffner-Button, Suchfilter, Pfeiltasten + Enter, Gruppen und Kürzel — emittet befehl, Escape/Backdrop schließen AppDesktop

Kontextmenü

component.context-menu · v1.0.0 Rechtsklick-Menü für eine Zielfläche: Einträge mit Icons/Trennern/Gefahr-Ton, öffnet an der Mausposition, schließt bei Außenklick/Escape — Einträge emittieren aktion WebsiteAppDesktop

Menüleiste (Menubar)

component.menubar · v1.0.0 Klassische Desktop-Menüleiste (Datei, Bearbeiten, Ansicht …): Menüs mit Einträgen, Kürzeln, Trennern und Gefahr-Ton; Tastatur-fähig, öffnet bei Hover wenn ein Menü offen ist AppDesktop

Seitenkopf (Page Header)

component.page-header · v1.0.0 App-Seitenkopf (Untitled-UI-Muster): Titel + Beschreibung links, Aktions-Buttons rechts (Varianten wie Nav-Aktionen), optionale Trennlinie AppDesktop

Schritte (Progress Steps)

component.progress-steps · v1.0.0 Wizard-Fortschritt (Untitled-UI-Muster): erledigte Schritte mit Häkchen, aktiver hervorgehoben, kommende gedämpft — Verbindungslinien aus Tokens WebsiteAppDesktop

Seitenleiste (Sidebar)

component.sidebar · v1.0.0 App-Seitenleiste (Untitled-UI-Muster): Marke, gruppierte Nav-Einträge mit Icons + Badges, Fußbereich mit Nutzer — einklappbar (Controller), aktiver Eintrag hervorgehoben AppDesktop

Theme-Umschalter

component.theme-switcher · v1.0.0 Segmentierter Umschalter Hell/Dunkel/System — setzt data-theme am Dokument, merkt sich die Wahl (localStorage) und folgt der Systemeinstellung WebsiteAppDesktop

Baum (Tree View)

component.tree · v1.0.0 Hierarchische Baum-Ansicht (Ordner/Strukturen, max. 6 Ebenen): Zweige klappen per Controller, Blätter emittieren select — Chevron dreht, aktiver Knoten hervorgehoben WebsiteAppDesktop

Modal

component.modal · v1.1.0 Dialog mit Backdrop (surface.backdrop + layer.modal) — Schließen über X, Backdrop-Klick und Escape; inline-Modus für Demo/Builder WebsiteAppDesktop

Tooltip

component.tooltip · v1.0.0 Hinweis-Blase bei Hover/Fokus — rein CSS (kein JS), Ebene über layer.dropdown WebsiteAppDesktop

Dialog-Stapel

component.dialog-stack · v1.0.0 Mehrstufiger Dialog (Wizard): gestapelte Ebenen mit Zurück/Weiter, hintere Ebenen bleiben versetzt sichtbar — Escape schließt, emittiert step und finish WebsiteAppDesktop

Schublade (Drawer)

component.drawer · v1.0.0 Von rechts einfahrendes Slideout-Panel mit Backdrop (Untitled-UI-Muster): Öffner-Button, Kopf mit Titel + Schließen, Inhalt, Fußleiste — Escape/Backdrop schließen WebsiteAppDesktop

Hover-Karte (Vorschau)

component.hover-card · v1.0.0 Vorschau-Karte beim Überfahren/Fokussieren eines Auslösers (Link-Vorschau, Personen-Karte): Titel, Text, Meta-Zeile — mit Verzögerung, schließt bei Verlassen/Escape WebsiteAppDesktop

Produkt-Karte

component.product-card · v1.0.0 Der Grundstein aller Shop-Grids: Bild (oder Platzhalter), Sale-Badge, Wunsch-Herz, Titel, ui.price + ui.rating — komponiert aus den Shop-Elementen WebsiteApp

Produkt-Galerie

component.product-gallery · v1.0.0 Thumbnail-Spalte + Hauptbild — Controller wechselt das Hauptbild beim Thumbnail-Klick; ohne Bilder rendern Platzhalter-Flächen WebsiteApp

Sticky-Kaufleiste

component.sticky-buy-bar · v1.0.0 Am unteren Rand fixierte Kaufleiste: Titel + ui.price + Warenkorb-CTA — erscheint erst nach dem ersten Scroll-Viewport (Controller) WebsiteApp

Varianten-Picker

component.variant-picker · v1.0.0 Produktvarianten wählen: Farb-Swatches (ui.swatch) + Größen-Pills mit Verfügbarkeit — Controller pflegt die Auswahl und emittet variante WebsiteApp

Aktivitäten (Feed)

component.activity-feed · v1.0.0 Aktivitäten-Feed mit Zeitleiste: Initialen-Kreis, Akteur + Aktion + Ziel, Zeitstempel — Verbindungslinie aus Tokens AppDesktop

Leerzustand (Empty State)

component.empty-state · v1.0.0 Zentrierter Leerzustand (Untitled-UI-Muster): Icon-Fläche, Titel, Text, Primär- und Sekundär-Aktion — für leere Listen, Suchergebnisse, Erststarts WebsiteAppDesktop

Metrik-Karte

component.metric-card · v1.0.0 Dashboard-Kennzahl (Untitled-UI-Muster): Label, großer Wert, Delta-Badge mit Richtung (steigend grün / fallend rot), Vergleichstext AppDesktop

Akkordeon

component.accordion · v1.0.0 Auf-/zuklappbare Einträge (items-Array) — Grundlage für FAQ; toggle als semantisches Event WebsiteAppDesktop

Card

component.card · v1.0.0 Inhaltskarte mit Media-, Inhalts- und Footer-Slot WebsiteAppDesktopE-Mail

Navigation

component.navigation · v1.5.0 Hauptnavigation in zwei Menü-Formen: klassische Leiste ODER Burger-Flyout (Logo + Primary-CTA + Burger, Links im Vollflächen-Overlay rechtsbündig) — navigate als semantisches Event WebsiteAppDesktop

Teaser-Karte

section.teaser-card · v1.0.0 Im Block Builder eingefrorene Komposition WebsiteApp

App Shell

template.app.shell · v1.2.0 App-Seitengerüst: Seitenleiste links (Navigation), Kopfzeile optional, Arbeitsbereich — für Desktop-Apps und Web-Applications WebsiteAppDesktop