Alle Komponenten

Entdecken Sie alle 308 Lyra UI-Komponenten. Filtern Sie nach Familie, suchen Sie nach Namen, testen Sie verfügbare Vorschauen oder öffnen Sie ein dokumentiertes Beispiel.

Konversation & Chat

Agent-Workspace — Responsive, gesteuerte Hülle für eine KI-Konversation, die Transkript und Eingabefeld zusammenführt, mit einem optionalen Detailbereich für Lauf, Tools, Retrieval, Grounding und Kontext.
Audio-Visualizer — Auf Canvas gezeichnete Sprachaktivitäts-Visualisierung, die den Zustand eines Agenten (inaktiv, zuhörend, nachdenkend oder sprechend) widerspiegelt.
Varianten-Umschalter — Gesteuerter „‹ n / m ›“-Navigator durch regenerierte oder bearbeitete Varianten einer Chat-Nachricht.
Chat-Eingabefeld — Automatisch mitwachsendes Eingabefeld für Chat-Nachrichten mit integrierten Sende- und Stopp-Steuerelementen.
Chat-Nachricht — Rollenbasiertes Grundgerüst für Chat-Sprechblasen mit Avatar, Badges und statusabhängiger Fusszeile.
Chat-Viewport — Scroll-Container für die Transkription, der das Verhalten „am Ende verankert bleiben“, eine „Zum neuesten springen“-Pille und einen Trenner für ungelesene Nachrichten steuert.
Checkpoint — Inline-Wiederherstellungspunkt der Unterhaltung mit Bestätigung vor der Wiederherstellung, um den Chat auf einen früheren Stand zurückzusetzen.
Codeblock — Eingerahmte Codedarstellung mit optionalem Lazy-Syntax-Highlighting und einem Kopier-Button.
Codeblock-Core — Codeanzeige mit minimalem Build-Overhead, die Syntax-Highlighting nur anhand einer zur Kompilierzeit bereitgestellten Grammatik-Map durchführt.
Konversationseintrag — Auswählbare Zeile im Chat-Verlauf, die Titel, Vorschau und Zeitstempel einer Sitzung anzeigt.
Generierungsstatus — Zeigt verstrichene Zeit, Tokens und Durchsatz, während eine KI-Antwort gestreamt wird.
Übergabe-Trenner — Beschrifteter Trenner, der die Kontrollübergabe zwischen Agents in einer Mitschrift markiert.
Markdown — Bereinigtes Rendering von Markdown zu HTML mit GFM-Tabellen, Code und Links.
Markdown-Core — Markdown-Rendering mit minimalem Build-Overhead, das Code-Highlighting nur anhand einer zur Kompilierzeit bereitgestellten Grammatik-Map durchführt.
Nachrichtenaktionen — Aktionsleiste pro Nachricht für eine Chat-Nachricht mit integriertem Kopieren, Neu-generieren, Bearbeiten und Feedback.
Nachrichten-Feedback — Daumen-hoch/-runter-Bewertung für eine Assistentennachricht mit optionalem Detailbereich für Grund und Kommentar.
Modellauswahl — Auswahl von Anbieter und Modell mit festem Katalog oder frei eingebbarem benutzerdefiniertem Eintrag.
Modelleinstellungen-Panel — Kombination aus Modellauswahl und Temperatur-Slider zur Konfiguration eines Agenten.
Push-to-Talk — Mikrofon-Aufnahme-Button, der den kompletten Ablauf aus Berechtigungsanfrage, Aufnahme und Aufräumen für Drücken-und-Halten- oder Umschalt-Bedienung selbst steuert.
Stream-Status — Zeigt die Phase einer einzelnen Streaming-Verbindung mit Heartbeat-basierter Stillstandserkennung.
Streaming-Text — Rendert gestreamten Assistenten-Text inkrementell und bündelt schnelle Token-Updates.
Streaming-Text-Core — Streaming-Text-Renderer mit minimalem Build-Overhead, dessen Markdown-Modus Codeblöcke nur anhand einer zur Kompilierzeit bereitgestellten Grammatik-Map hervorhebt.
Vorschlags-Chips — Scrollbare Reihe von Start- oder Folge-Prompt-Chips, die den gewählten Text an die Host-Anwendung übergeben.
Thread-Liste — Gruppierte, durchsuchbare Konversationsübersicht mit Anheften, Archivieren, Löschen und Umbenennen als Zeilenaktionen.
Transkript-Feed — Live-Untertitel-Feed für eine laufende Sprachsitzung mit Hochstufung von vorläufigen zu endgültigen Untertiteln und dem Verhalten „am Ende verankert bleiben“.
Tippindikator — Rein visueller Präsenzhinweis, der anzeigt, dass der Assistent gerade eine Antwort verfasst.
Nutzungs-Badge — Kompakte Tokens-/Kosten-/Latenz-Leiste für eine Nachricht oder einen Lauf, mit Aufschlüsselung im Hover-Tooltip.
Stimmenauswahl — TTS-Stimmenauswahl über einen bereitgestellten Katalog mit Audio-Vorschau inline und Behandlung veralteter Werte.
Widget-Renderer — Rendert einen von einem Agenten gestreamten, deklarativen JSON-Widget-Baum über eine als Allowlist geführte Typ-zu-Komponenten-Registry.
Nachrichtenteile — Rendert geordnete, verschachtelbare KI-Nachrichtenteile mit Text-, Denk-, Werkzeug-, Zitat-, Anhangs- und Medienbausteinen.
Prompt-Eingabe — Verbindet die Prompt-Erstellung mit Anhängen, Modell-, Stimmen- und Quellenauswahl, Erwähnungen, Befehlen und wartenden Dialogzügen.
Prompt-Warteschlange — Verwaltet eine kontrollierte Warteschlange von Folge-Prompts, die bearbeitet, umgeordnet, entfernt oder sofort gesendet werden können.
Echtzeitsitzung — Bietet eine anbieterneutrale Sprachsitzung für Verbindung, Aktivität, Transkript, Aufnahme, Stummschaltung und Unterbrechung.
Auswahl-Werkzeugleiste — Positioniert Aktionen zum Fragen, Zitieren, Referenzieren und Kopieren am ausgewählten Text und erhält dessen Dokumentanker.

Agent-Tools & Observability

Aktivitäts-Feed — Nur anfügendes Streaming-Protokoll der einzelnen Aktionen eines Agenten, das sich nach Abschluss des Laufs zu einer Zusammenfassung der erledigten Schritte zusammenfasst.
Agent-Eval-Dashboard — Gesteuerte Evaluationsübersicht, die Kennzahlenkarten mit einem Trenddiagramm und einem Statusverlauf je Lauf verbindet.
Agentenfrage — Erfasst eine strukturierte Antwort auf eine Frage eines Agenten oder MCP-Servers, mit Aktionen zum Annehmen, Ablehnen und Abbrechen.
Hintergrundläufe — Zeigt von der Anwendung verwaltete Agentenaufträge in der Warteschlange, bei der Ausführung und nach Abschluss sowie Anfragen zum Öffnen und Abbrechen.
Budgetanzeige — Zeigt die bereitgestellte Nutzung im Verhältnis zu einem Grenzwert, auch bei nicht verfügbaren oder überschrittenen Werten.
Änderungsprüfung — Prüft von der Anwendung bereitgestellte Dateiänderungen und fordert für jeden Abschnitt eine Entscheidung zum Behalten oder Verwerfen an.
Connector-Verwaltung — Zeigt den Verbindungsstatus und fordert Aktionen zum Verbinden, Trennen oder erneuten Versuchen für von der Anwendung verwaltete Connectors an.
Berechtigungsfreigabe — Zeigt eine begrenzte Berechtigungsanfrage und meldet der Anwendung, ob sie zugelassen oder abgelehnt wurde.
Berechtigungsregeln — Zeigt von der Anwendung definierte Berechtigungsregeln und fordert Änderungen an den Entscheidungen Zulassen, Nachfragen oder Ablehnen an.
Agent-Lauf — Übergeordnete Hülle für einen einzelnen Agent-Lauf mit Status, verstrichener Zeit, aktuellem Schritt und Kosten sowie Aktionen zum Abbrechen und Wiederholen.
Agent-Trace — Hierarchische Trace-Ansicht für Agent und LLM mit Filtern nach Span-Art und Schnellsprüngen zu Übergaben über ein gemeinsames Spans-Array.
Freigabe-Warteschlange — Per Tastatur bedienbare Warteschlange ausstehender Tool-Aufrufe, die einzeln über einen gemeinsamen Dialog geprüft und genehmigt oder abgelehnt werden.
Artefakt-Panel — Rahmen um ein von einem Agenten erzeugtes Artefakt mit Vorschau/Code-Umschalter, Versionsnavigation sowie Kopier- und Download-Aktionen.
Browser-Rahmen — Rein darstellender „Agenten-Computer“-Viewport, der einen Screenshot-Stream, eine schreibgeschützte URL und Steuerelemente zur Übernahme zeigt.
Commit-Card — Kompakte Commit-Zusammenfassung mit Diffstat und dateiweisen Änderungen, die zu einer Diff-Ansicht verlinkt.
Vergleichspanel — Seite-an-Seite-Vergleich zweier Ausgaben (A/B) mit Sieger-Abstimmung, für arena-artige Modellbewertung.
Bestätigungsleiste — Inline, nicht-modaler Freigabe-/Ablehnungs-Block für eine vorgeschlagene Agent-Aktion, der in der Mitschrift statt in einem Dialog sitzt.
Kontext-Inspektor — Prüfansicht der Kontextsegmente eines Modellaufrufs mit Token-Schätzungen, Zitaten, Schwärzungsmarkierungen und Kopier-/Export-Steuerelementen.
Eval-Datensatz — Filter- und taggbare Liste von Evaluationsbeispielen mit Möglichkeiten zum Hinzufügen, Entfernen, Importieren und Exportieren.
Eval-Ergebnis — Oberfläche für Rubrik-Bewertung und menschliche Prüfung zum Vergleichen der Läufe eines einzelnen Evaluationsbeispiels.
Evaluationslauf — Live-Fortschrittsansicht für einen Evaluationsstapel mit Gesamtfortschritt und je einem Ausklappbereich pro Beispiel, einschliesslich Grounding- und Tool-Traces.
Richtlinien-Zusammenfassung — Schreibgeschützte Liste von Entscheidungen zu Leitplanken, Berechtigungen, Datenschutz und Tool-Richtlinien mit barrierefreien Begründungen für Erlauben, Ablehnen oder Prüfbedarf.
Span-Wasserfall — Horizontale Zeitleiste der Spans eines Agenten-Traces als statusgefärbte Balken über einer gemeinsamen Zeitachse.
Stacktrace — Parst JS/TS-, Browser- und Python-Stacktraces zu aktivierbaren Frames mit Einklappen interner Frames.
Aufgabenliste — Live aktualisierter, einklappbarer Tracker für den Plan eines Agenten mit Lebenszyklus-Status pro Schritt und verschachtelten Unterschritten.
Terminal — Schreibgeschützte ANSI-Konsole für gestreamte Agenten- oder Tool-Ausgaben, mit Suche und dem Verhalten „am Ende verankert bleiben“.
Testergebnisse — Bestanden/Fehlgeschlagen-Zusammenfassung einer Testsuite mit Anzahl je Status, Filter-Umschaltern und automatisch ausklappenden Fehlerdetails.
Denkprozess-Panel — Einklappbares Panel für die Live- oder geprüfte Reasoning-Mitschrift eines KI-Agenten.
Tool-Freigabe-Dialog — Human-in-the-Loop-Kontrollpunkt zum Genehmigen, Ablehnen oder Bearbeiten eines vorgeschlagenen Tool-Aufrufs vor dessen Ausführung.
Tool-Aufruf-Block — Einklappbarer Inline-Block für einen Tool-Aufruf des Agenten, der sich aufklappen lässt, um Argumente, Fehler und Ergebnis zu zeigen.
Tool-Aufruf-Chip — Kompakter Inline-Chip, der Name, Status und Dauer eines Tool-Aufrufs des Agenten zusammenfasst.
Tool-Parameter-Formular — Erzeugt aus dem flachen JSON Schema eines Tools ein editierbares Formular zum Anpassen der Aufrufargumente.
Tool-Ergebnis-Dialog — Modales Overlay mit Status, Dauer und vollständigen Ergebnisdetails eines Tool-Aufrufs.
Tool-Ergebnis-Ansicht — Rendert das Ergebnis eines Tool-Aufrufs über einen registrierten Renderer, mit Fallback auf JSON.
Tool-Auswahl-Dialog — Nach Kategorien gruppierter, durchsuchbarer Dialog zur Auswahl der aktivierten Agenten-Tools.
Tool-Zeitleiste — Chronologische Liste der Tool-Aufrufe eines Agent-Laufs mit Wiederholungszähler, Human-in-the-Loop-Freigabe und Schwärzung sensibler Felder.
Trace-Baum — Einklappbare Span-Hierarchie für einen Agenten-/LLM-Trace mit Dauerbalken und optionalen Token-/Kosten-Spalten.
Ergebniskarte — Umrandetes Karten-Gehäuse, das eigenen Tool-Ergebnis-Renderern ein einheitliches, kompaktes Erscheinungsbild verleiht
Ergebnisfeld — Kompakte Label/Wert-Zeile für Tool-Ergebniskarten und dichte Metadaten-Leisten
MCP-App — Hostet eine ausführbare MCP-App-Ressource in einer isolierten Sandbox und gibt Host-Anfragen als typisierte Ereignisse weiter.
Prompt-Studio — Bietet eine anbieterneutrale Arbeitsumgebung zum Bearbeiten, Anzeigen, Versionieren, Speichern und Ausführen strukturierter Prompts.
Schema-Viewer — Untersucht auswählbare JSON-Schema-Bäume mit Einschränkungen, Pflichtfeldern, Kompositionszweigen und Validierungsproblemen.
Subagenten-Panel — Zeigt eine kontrollierte Hierarchie von Subagentenläufen mit Status, Aufgabe, Modell, Fortschritt und Lebenszyklusaktionen.

Retrieval & Wissensgraphen

Community-Card — Zusammenfassungskarte für eine Wissensgraph-Community mit Mitglieder-Chips und einer Drill-in-Aktion.
Embedding-Explorer — Barrierefreie 2D-Streuansicht vom Host projizierter Embedding-Koordinaten, mit optionaler Cluster-Einfärbung und Punktauswahl.
Entitäts-Card — Dossier-Karte für eine Wissensgraph-Entität mit Typ-Badge, Eigenschaften, Grad und einer Fokussieren-im-Graph-Aktion.
Entitäts-Chip — Inline-@Entität-Erwähnung für Agent-Text mit Vorschau-Popover bei Hover oder Fokus.
Entitäts-Dossier — Detailansicht einer Entität mit Kopfbereich, Konfidenz-Kennzahl und Tabs für Beziehungen, stützende Chunks und Provenienz.
Graph — Stellt Beziehungen als verschiebbares, zoombares, kraftbasiertes Knoten-Kanten-Diagramm dar.
Graph-Legende — Knotentyp-Legende für einen zugehörigen Graphen, die zugleich als Sichtbarkeitsfilter dient.
Ingestion-Warteschlange — Gesteuerte Liste von Dokumenten auf dem Weg durch eine Ingestion-Pipeline, mit Anzeige von Phase, Fortschritt, Anzahl sowie Wiederholungs- oder Abbruchanfragen.
Wissensdatenbank — Quellenliste einer Retrieval-Wissensdatenbank mit Sync-Status, Indexierungszustand, Berechtigungen und Verwaltungsanfragen pro Zeile.
Wissensdatenbank-Verwaltung — Betriebshülle mit Tabs, die Quellen einer Wissensdatenbank und die Ingestion-Warteschlange zusammenführt und Verwaltungsaktionen an den Host weitergibt.
Wissensgraph-Explorer — Erkundungshülle für einen Wissensgraphen, die Graph-Rendering, Entitätssuche, Typfilter, Nachbarschaftserweiterung und Pfadsuche vereint.
Mind-Map — Radial aufklappbarer Themenbaum zum räumlichen Durchsuchen einer Hierarchie und Vertiefen in ein Thema.
Nachbarliste — Beziehungszeilen einer Entität mit Navigations- und Graph-Erweiterungsfunktion pro Zeile.
Knotenpalette — Durchsuchbare, kategorisierte Knotenbibliothek zum Ziehen oder Platzieren von Knoten auf einer Flow-Canvas.
Pfadleiste — Kompakte, scrollbare Knoten-Relation-Knoten-Kette, die einen GraphRAG-Reasoning-Pfad darstellt.
Chunk-Inspektor — Rangliste abgerufener RAG-Chunks mit Relevanz-Balken und einem Deep-Link in einen Dokument-Viewer.
Zitat-Badge — Inline-Zitatmarkierung [n] mit Hover-Vorschau und Farbcodierung nach Konfidenz bzw. Verifizierungsstatus.
Grounding-Zusammenfassung — Scorecard zur Grounding-Prüfung auf Aussageebene mit Beleganzahl, Zitatabdeckung, Konfidenz, Warnungen und Belegzitaten.
Gedächtnis-Panel — Oberfläche für das Arbeitsgedächtnis eines Agenten mit Kurzzeitkontext und Langzeiterinnerungen, samt Konfidenz und bestätigungspflichtigen Aktionen.
Provenienz-Panel — Stellt die Grundlage einer Antwort als einklappbare Aufschlüsselung nach Entitäten, Beziehungen, Communities und Chunks dar.
RAG-Antwort — Oberfläche für fundierte Antworten, die bereinigtes Markdown, Zitat-Badges, eine Grounding-Bewertung und ausklappbare Quellenvorschauen kombiniert.
Recherchefortschritt — Zeigt die von der Anwendung bereitgestellten Rechercheschritte, Quellenzahlen und den Gesamtfortschritt.
Retrieval-Ergebnisse — Nach Relevanz geordnete Liste abgerufener Chunks mit Deduplizierung, Gruppierung nach Quelle, Auswahl sowie kompakter oder erweiterter Darstellung.
Retrieval-Suche — Abfrageleiste für eine Retrieval- oder RAG-Oberfläche mit Filter- und Bereichs-Chips, einem Umschalter für Vektor-, Stichwort- oder Hybridsuche sowie Statusrückmeldung.
Retrieval-Trace — Phasen-Zeitleiste der Retrieval-Pipeline mit ausklappbaren Belegen für jede Rewrite-, Embedding-, Retrieval-, Rerank- und Filterphase.
Quellen-Card — Zitationseintrag mit Titel, Seite, Auszug und ausklappbarem Volltext einer Quelle.
Quellenliste — Einklappbares Quellen-Panel, das die Quellen-Cards einer Chat-Nachricht unter einer gemeinsamen Überschrift gruppiert.
Quellenauswahl — Checkbox-Baum zur Eingrenzung der Quellen, die die nächste Antwort stützen, mit dreiwertigen Ordnern, Alles-auswählen und Suche.
Nachweise für Aussagen — Prüft generierte Aussagen anhand von Zitaten und zeigt Unterstützungsstatus, Konfidenz und Belege.
RAG-Evaluierungsdashboard — Zeigt vom Host berechnete RAG-Qualitätsmetriken, Trends, Evaluierungsausschnitte und den Verlauf der Ausführungen.
Retrieval-Vergleich — Vergleicht sortierte Retrieval- und Reranking-Ergebnismengen mit Überschneidung und detaillierter Punkteaufschlüsselung nebeneinander.

Formulare & Eingabefelder

Schaltfläche — Tokenbasierter Action-Button mit Ton-Varianten, verschiedenen Grössen und Ladezustand.
Kontrollkästchen — Boolesches Formularelement mit aktiviertem, deaktiviertem und unbestimmtem Zustand.
Checkbox-Gruppe — Fasst zusammengehörige Checkboxen zu einem formulargebundenen, validierten Mehrfachauswahlfeld zusammen.
Code-Editor — Abhängigkeitsfreie, mehrzeilige Code-Bearbeitungsoberfläche mit optionaler Randspalte für Zeilennummern.
Farbwähler — Formulargebundenes natives Farbeingabefeld mit Label, Hinweistext und Anzeige für Validierungsfehler.
Combobox — Filterbare Einzel- oder Mehrfachauswahl, die ein Textfeld mit einem Listbox-Popover kombiniert.
Datumseingabe — Datumsfeld mit angehängtem Kalender-Popover und ISO-8601-Wert.
Datumsauswahl — Inline-Kalender im Monatsraster zur Auswahl eines einzelnen Datums oder eines Datumsbereichs.
Emoji-Auswahl — Durchsuchbare, per Tastatur navigierbare, formulargebundene Auswahl zum Wählen eines Emojis.
Icon-Button — Löst eine Aktion über einen kompakten, barrierefreien reinen Icon-Button aus.
Eingabefeld — Einzeiliges Textfeld mit optionalem Label, Hinweistext und Inline-Validierungsanzeige.
Länderauswahl — Wählt Länder- und Gebietscodes mit übersetzten Namen, Flaggen und optionaler Suche.
Währungsauswahl — Wählt Währungscodes mit übersetzten Namen, Symbolen und optionaler Suche.
Zeitzonenauswahl — Wählt Zeitzonenkennungen aus einer geordneten Liste mit optionaler Suche.
Einheitenauswahl — Wählt Masseinheiten mit übersetzten Namen, Symbolen und optionaler Suche.
Locale-Auswahl — Dropdown mit geschlossener Liste zum Wechseln der aktiven Locale, gespeist aus der bibliothekseigenen Locale-Registry.
Zahleneingabe — Numerisches Feld mit Min-, Max- und Step-Beschränkungen sowie nativer Constraint-Validierung.
Option — Auswählbare Option, die Wert-, Label-, Gruppierungs- und Statusdaten an eine Combobox liefert.
Telefoneingabe — Länderbewusstes Telefonfeld, dessen Formularwert im kanonischen E.164-Format vorliegt
Optionsfeld — Formulargebundenes Einzelauswahl-Element zur Auswahl einer Option aus einer Menge
Radio-Gruppe — Beschriftete, per Tastatur navigierbare Gruppe von Radiobuttons zur Einzelauswahl.
Bewertungsformular — Konfigurierbares Bewertungsraster aus Punktzahl, Kategorie und Kommentar mit Absenden-und-Weiter-Ablauf zum Abarbeiten einer Eval-Warteschlange.
Auswahlfeld — Dropdown mit geschlossener Liste zur Auswahl einer Option aus einer festen Menge an Möglichkeiten.
Signature pad — Accessible form control for drawing a signature with pointer or keyboard input.
Schieberegler — Numerisches Bereichselement für Einstellungen wie die LLM-Temperatur oder die Lautstärke.
Farbfeldauswahl — Einfachauswahl aus einer kleinen, festen Menge an Farbfeldern mit eingebautem Radiogroup-Contract.
Schalter — Boolesches Toggle-Formularelement mit On/Off-Switch-Semantik für native Formulare.
Textbereich — Mehrzeiliges Klartext-Eingabefeld mit automatischer Höhenanpassung, Validierung und Formularelement-Oberfläche.
Zeiteingabe — Lokalisiertes, segmentiertes Zeitfeld mit angehängtem Spalten-Picker; die native Browser-Erfahrung (input[type=time]) ist lr-native-time-input.
Zeitbereich — Zweigriffiger Brush zur Auswahl eines Start- und Endbereichs über einen numerischen Wertebereich.
Umschalter — Eigenständiger Button mit zwei Zuständen, der eine Option mit aria-pressed-Semantik ein- oder ausschaltet.
Umschaltergruppe — Bündelt Umschalter hinter einem einzigen Tab-Stopp, mit Mehrfachauswahl oder aufhebbarer Einzelauswahl.
Native Zeiteingabe — Natives Zeitauswahlfeld, umschlossen von Lyra-Label, Hinweistext und Validierungsanzeige, für den Einsatz anstelle des segmentierten lr-time-input, wenn die native Auswahl des Browsers bevorzugt wird.
OTP-Eingabe — Segmentiertes Feld zur Eingabe eines einmaligen Bestätigungscodes, mit integrierter SMS-Autovervollständigung.
Segmentiertes Optionsfeld — Einzelauswahl-Element im Button-Look statt als Kreis, meist mit lr-radio-group zu einem segmentierten Steuerelement gruppiert.
Token-Eingabe — Formulargebundenes Feld, das eine Liste entfernbarer Tokens wie Tags oder Empfänger erfasst.

Datenanzeige

Graph-Abfrage-Generator — Formulargebundener Editor für eine typisierte Graph-Beziehungs- oder Pfadabfrage, mit Entitäts-Ankern, Typfiltern, Hop-Begrenzung und gespeicherten Abfragen.
Kalender — Responsiver Monatskalender mit Ereignismarkierungen und einer per Tastatur zugänglichen Agenda-Ansicht.
Kontextanzeige — Segmentierte Auslastungsanzeige, als Balken oder Ring, für ein Token-Budget oder Kontextfenster.
Dokumentenbibliothek — Durchsuch- und filterbarer Dokumentbestand mit Versionen, Tags, Verantwortlichen, Aktualität, Sortierung und Mehrfachauswahl.
Umgebungsvariablen-Liste — Maskierte Schlüssel/Wert-Liste für Umgebungsvariablen und Geheimnisse, mit Aufdecken und Kopieren pro Zeile.
Dateibaum — Datei-Explorer-Voreinstellung über der Baum-Komponente mit Git-Status-Badges und verzögertem Laden von Verzeichnissen.
Flow-Canvas — Verschiebbare, zoombare Fläche zum Erstellen und Ausführen visueller DAG-Workflows.
Flow-Steuerung — Zoom-, Einpassen- und Sperren-Schaltflächengruppe für eine zugehörige Flow-Canvas.
Flow-Minimap — Übersichtskarte in der Ecke mit einem ziehbaren Sichtbereich-Rechteck für eine zugehörige Flow-Canvas.
Flow-Knoten — Workflow-Knotenkarte mit Kopfzeile, Statusfarbe und Verbindungspunkten für eine Flow-Canvas.
Flow-Ausführungs-Overlay — Überträgt Ausführungsstatus-Dekorationen auf eine Flow-Canvas und zeigt eine kompakte Schritt-Zusammenfassung.
Trichter — Zeigt den schrittweisen Konversionsverlust als Balken, normalisiert auf die erste Stufe.
Anzeige — Zeigt einen einzelnen Wert als Radial-, Ring- oder Linearanzeige.
Heatmap — Rendert eine Matrix oder ein Kalenderraster aus Werten als grössenanpassungsfähige Canvas-Heatmap.
Paginierung — Kontrollierte Seitennavigation mit editierbarer Seitenzahleingabe und Elementbereichsanzeige
Abfrage-Generator — Kombinierbarer Generator für strukturierte Abfragen auf Tabellen- oder Dashboard-Daten, der Bedingungszeilen aus Feld/Operator/Wert mit einem UND/ODER-Kombinator verknüpft.
Sequenzleiste — Kompakte, elementweise Leiste, die eine Abfolge kategorialer Zustände als farbige Zellen mit optionalem Marker darstellt.
Sparkline — Stellt einen kompakten Inline-SVG-Trend für eine Datenreihe als Linie, gefüllte Fläche oder Balken dar.
Kennzahl — Zeigt eine einzelne Kennzahl mit Einheit, Trend-Pill, Aufschlüsselungszeilen und optionaler Sparkline.
Tabelle — Präsentationsorientierte Datentabelle mit sortierbaren Kopfzeilen, Auswahl, Filterung und Paginierung.
Zeitleiste — Verkettete Abfolge vergangener Ereigniszeilen für Audit-Trails, Agent-Verläufe und Changelogs.
Zeitleistenelement — Eine Ereigniszeile für eine Zeitleiste mit farblich codierter Markierung, Titel, Zeitstempel und Beschreibung.
Baum — Auf-/zuklappbare Hierarchie zum Navigieren durch Graphen, Dokumente oder Dateibäume
Baumknoten — Rekursiver treeitem-Zeilen-Renderer für einen Knoten und seine Kinder innerhalb eines Baums.
Wortwolke — Abhängigkeitsfreie SVG-Wortwolke, die jedes Wort nach seiner Gewichtung skaliert
Datenraster — Virtualisiertes Datenraster für grosse, client- oder serverseitige Datensätze, mit Sortierung, Filterung, Gruppierung, Paginierung und Auswahl.

Diagramme

Balkendiagramm — Vergleicht Werte über Kategorien hinweg mit vertikalen oder horizontalen Balken.
Boxplot — Fasst Verteilungen anhand vorberechneter Fünf-Punkte-Zusammenfassungen zusammen.
Blasendiagramm — Stellt drei Dimensionen pro Punkt mittels x-Position, y-Position und Blasenradius dar.
Diagramm — Zentraler Chart.js-Wrapper für Linien-, Balken-, Kreisdiagramme und weitere Datenvisualisierungen.
Donut-Diagramm — Zeigt Anteile am Ganzen als Segmente eines Rings.
Histogramm — Teilt numerische Werte in gleich breite Klassen ein, um ihre Verteilung sichtbar zu machen.
Liniendiagramm — Verfolgt Trends entlang einer kontinuierlichen Achse mit einer oder mehreren verbundenen Serien.
Lite-Diagramm — Abhängigkeitsfreies Balken- und Liniendiagramm, gerendert als reines SVG, ganz ohne Chart.js
Kreisdiagramm — Proportionales Kreisdiagramm, das den Anteil einer Serie am Ganzen zeigt
Polarflächendiagramm — Polarflächendiagramm, das jede Kategorie als wertskalierten Kreissektor darstellt
Radardiagramm — Radardiagramm, das mehrere Kennzahlen einer Serie auf einem radialen Raster vergleicht
Streudiagramm — Streudiagramm mit rohen x/y-Punktepaaren auf linearen Achsen

Layout & Navigation

Akkordeon — Koordiniert eine Gruppe von Ausklapp-Panels und erlaubt optional, dass mehrere davon gleichzeitig geöffnet sind.
Akkordeon-Element — Einklappbares Ausklapp-Panel für die Einbindung in eine Akkordeon-Gruppe.
App-Leiste — Responsive Navigationsleiste, die sich von voller Breite über reine Icon-Darstellung bis hin zu einem mobilen Overlay anpasst.
App-Leisten-Gruppe — Betitelter, optional einklappbarer Abschnitt, der Navigationselemente innerhalb einer App-Leiste gruppiert.
App-Leisten-Element — Navigationselement mit Icon und Beschriftung für eine App-Leiste, mit einem auf reine Icons reduzierten eingeklappten Zustand.
Breadcrumb — Responsiver Navigationspfad, der die Position des Nutzers innerhalb einer Seitenhierarchie anzeigt
Breadcrumb-Element — Ein Link oder die Beschriftung der aktuellen Seite innerhalb eines Breadcrumb-Navigationspfads
Button-Gruppe — Fasst zusammengehörige Aktions-Buttons zu einem responsiven, beschrifteten Cluster zusammen
Karte — Umrandete Inhaltsfläche mit Slots für Header, Medien, Footer und Aktionen.
Karussell — Barrierefreies Karussell mit jeweils einem sichtbaren Slide, Tastaturnavigation, Indikatoren, Endlosschleife und Autoplay.
Karussell-Element — Optionaler semantischer Slide-Wrapper, der einem Kind-Element des Karussells einheitliches Styling verleiht.
Befehlspalette — Durchsuchbares Befehlsmenü der Anwendung mit Tastaturnavigation und Tastenkombinationen.
Steuerelement-Gruppe — Fasst gemischte Formular-Steuerelemente und Aktions-Buttons zu einer responsiven, zentrierten Werkzeugleiste zusammen
Dashboard-Grid — Responsives, per Tastatur bedienbares, gesteuertes Widget-Grid, das Layout-Einträge positioniert und Verschiebe-, Grössenänderungs- und Kollisionsanfragen ausgibt.
Details — Barrierefreies Ausklapp-Panel, das sich öffnet, um Inhalte unterhalb einer Zusammenfassung anzuzeigen.
Dock-Panel — Grössenveränderbares, einklappbares Panel, das an einer Kante des bestehenden Layouts andockt.
Drilldown-Panel — Gesteuerte Navigationshülle von einem Diagramm- oder Tabellenwert zu zugehörigen Belegen, Dokumenten, Entitäten oder Agent-Läufen, mit Breadcrumb-Pfad.
Dropdown-Element — Web Awesome-kompatibler Alias für eine einzelne Aktionszeile innerhalb eines Dropdown-Menüs.
Filterleiste — Dashboard-Filterzeile aus Lyra-Eingabefeldern und entfernbaren Chips, mit Zurücksetzen- und Ladezuständen.
Menü — Semantisches Inline-Menü mit Aktionselementen, Tastaturnavigation und verschachtelten Untermenüs.
Menü-Element — Einzelne Aktionszeile für ein Menü, mit optionalem Icon, optionaler Checkbox oder destruktivem Stil.
Umsortierbares Listenelement — Einzelne Zeile innerhalb einer umsortierbaren Liste, die Schaltflächen zum Verschieben nach oben/unten mit beliebigem, per Slot eingefügtem Inhalt kombiniert.
Umsortierbare Liste — Generische Liste mit umsortierbaren Zeilen, verschiebbar über Schaltflächen pro Zeile oder die Tastenkombination Strg/Cmd+Pfeiltaste.
Menü-Label — Fügt eine nicht interaktive Überschrift hinzu, um zusammengehörige Einträge in einem Menü zu gruppieren.
Menüleiste — Horizontale Anwendungs-Menüleiste mit betitelten Dropdown-Menüs und vollständiger Tastaturnavigation.
Menüleisten-Element — Titel der obersten Ebene einer Menüleiste, der sein eingebettetes Menü öffnet oder als einfache Aktion dient.
Navigationsmenü — Website-Kopfnavigation aus Links und Flyout-Panels, die bei Platzmangel hinter einen Menü-Button einklappt.
Navigationsmenü-Element — Ein Eintrag eines Navigationsmenüs: ein Seitenlink oder ein Disclosure-Button, der ein Flyout-Panel öffnet.
Seite — Semantische App-Shell, deren Navigation je nach tatsächlich zugewiesenem Platz – nicht dem Viewport – zwischen fester Spalte und modalem Mobil-Drawer wechselt.
Responsives Panel — Dockt Inhalte auf dem Desktop inline an oder zeigt sie auf Mobilgeräten als Overlay-Sheet an
Scroller — Responsive Overflow-Fläche mit optionalen Zurück-/Weiter-Steuerelementen für Karten- und Tab-Reihen.
Segmentiert — Einzelauswahl-Button-Reihe zur Auswahl einer von mehreren beschrifteten Optionen auf einen Blick.
Split — Teilt ein Dashboard in per Ziehen grössenveränderbare Panels, mit optionalem responsivem Einklappen.
Split-Panel — Teilt Inhalte mit einem einzigen Trenner in zwei per Ziehen grössenveränderbare Panels, eine einfachere Alternative zum mehrteiligen lr-multi-split.
Stepper — Führt Nutzer durch einen geordneten, mehrstufigen Assistenten mit Status pro Schritt und der Möglichkeit, per Klick direkt zu einem Schritt zu springen.
Tabs — Tab-Leiste, die jeweils ein Light-DOM-Panel anzeigt, mit vollständiger Tastaturnavigation.
Tab — Web Awesome/Shoelace-kompatibler Tab-Deskriptor, der über die Attribute panel und name mit seinem Panel in einer Tab-Leiste verknüpft wird.
Tab-Panel — Web Awesome/Shoelace-kompatibler Panel-Deskriptor, der über die Attribute name und panel mit seinem Tab in einer Tab-Leiste verknüpft wird.
Virtuelle Liste — Listen-Host mit Windowing, der bei grossen scrollbaren Sammlungen nur die sichtbaren Zeilen rendert
Widget — Panel-Gerüst mit Titel und optionalen Schaltern zum Einklappen und für die Vollbildanzeige

Overlays & Feedback

Toast — Stapelbereich, der Toast-Benachrichtigungen an einer Bildschirmecke verankert.
Toast-Element — Einzelner schliessbarer Toast mit Schweregrad-Akzent, optionalem Icon und automatischem Schliesstimer.
Chip — Kleines pillenförmiges Element für ein Tag, einen Filter oder einen Bereich, optional entfernbar oder umschaltbar.
Chip-Gruppe — Fasst eine Reihe von Chips zusammen und zeigt bei Überschreiten eines Limits optional einen +N-Overflow-Toggle.
Alert — Alert-Meldung, standardmässig geschlossen, mit automatischem Timeout und optionalem Wechsel in den gemeinsamen Toast-Stack.
Badge — Kompaktes Status-Label, das Zustand, Anzahl oder Kategorien inline anzeigt
Callout — Inline-Nachrichtenfläche für Status-, Warn- und Fehlerinhalte, schliessbar.
Kontextmenü — Macht einen beliebigen Bereich zum Ziel für Rechtsklick, langes Drücken oder Umschalt+F10, das ein Aktionsmenü öffnet.
Dialog — Modales Overlay mit Fokus-Trap für Bestätigungen, Formulare und andere unterbrechende Vorgänge.
Drawer — Schiebt ein modales Panel für Filter oder kontextbezogene Steuerelemente von einer beliebigen Viewport-Kante herein.
Dropdown — Popover mit Menü-Rolle, das eine Aktionsliste an einem von der aufrufenden Anwendung bereitgestellten Trigger verankert
Leerzustand — Signalisiert einen leeren oder datenlosen Zustand mit Icon, Nachricht und optionalen Aktionen.
Kbd — Plattformbewusster Chip, der eine Tastenkombination als Tastenkappen darstellt
Popover — Durch Klick ausgelöste, leicht schliessbare schwebende Fläche für kontextbezogene Inhalte und Steuerelemente
Popup — Low-Level-Primitive zur verankerten Positionierung, die ein schwebendes Panel an seinem Anker ausgerichtet hält, dieselbe Engine, auf der Popover und Tooltip aufbauen.
Fortschrittsbalken — Bestimmter oder unbestimmter horizontaler Fortschrittsindikator mit optionalem Wert.
Fortschrittsring — Bestimmter oder unbestimmter kreisförmiger Fortschrittsindikator mit zentrierter Beschriftung.
Bewertung — Tastaturzugängliche Sternebewertung mit Teilfüllungen in Bruchteilsgenauigkeit
Skeleton — Animierter Lade-Platzhalter, der während des Ladevorgangs an die Stelle des Inhalts tritt.
Spinner — Signalisiert eine laufende Hintergrundaufgabe mittels einer unbestimmten, animierten Aktivitätsanzeige.
Tag — Semantischer Alias der Badge-Darstellung zur Kennzeichnung von Schlagwörtern oder Kategorien
Tooltip — Durch Hover und Fokus ausgelöster Tooltip, der einen von der aufrufenden Anwendung bereitgestellten Trigger beschreibt

Dokument- & Datei-Viewer

Archiv-Viewer — Listet Dateinamen und unkomprimierte Grössen in einem ZIP-Archiv auf, ohne dessen Inhalt zu extrahieren.
Kalender-Viewer — Parst eine .ics-Kalenderdatei und rendert ihre Ereignisse als Zusammenfassungen, Uhrzeiten und Orte.
Kontakt-Viewer — Ruft ein vCard-Dokument ab und rendert pro Kontakt eine barrierefreie Karte.
CSV-Viewer — Ruft eine CSV-Datei ab und rendert ihre Zeilen in einer virtualisierten, scrollbaren Tabelle.
Datensatz-Viewer — Ruft durch Trennzeichen getrennten Text ab und rendert ihn als typisierte, barrierefreie Datentabelle.
Dokumentvergleich — Nebeneinander- oder Inline-Vergleich zweier Dokumentversionen, der eine textuelle Diff-Ansicht mit gerenderten Dokumentvorschauen kombiniert.
Dokumentvorschau — Zeigt eine Inline-Vorschau eines Dokuments oder Anhangs basierend auf dem MIME-Typ, mit Download als Fallback.
Dokument-Viewer — Zeigt ein Dokument in einem Dialog an, mit einer erweiterbaren Registry für MIME-Typ-Renderer.
DOCX-Viewer — Rendert eine DOCX-Datei über den mammoth-Konverter als bereinigtes, semantisches HTML.
E-Book-Viewer — Rendert ein EPUB mit Kapitelnavigation über die optionale Peer-Abhängigkeit epub.js.
E-Mail-Viewer — Parst eine .eml-Nachricht und rendert Header, bereinigten Nachrichtentext und Anhänge.
GeoJSON-Viewer — Ruft eine GeoJSON-Datei ab, validiert sie und stellt ihre Features auf einer Karte dar.
Hervorhebungs-Ebene — Overlay, das aktivierbare Hervorhebungsrechtecke über positioniertem Dokumentinhalt zeichnet.
HTML-Viewer — Ruft eine URL ab und rendert deren HTML sicher, nachdem es bereinigt wurde.
Include — Ruft ein HTML-Fragment ab und bindet es als bereinigten Light-DOM-Seiteninhalt ein.
Notebook-Viewer — Schreibgeschützter Jupyter-Notebook-Renderer, der Markdown, Code und umfangreiche Zellenausgaben zusammensetzt.
Seitenminiaturleiste — Virtualisierte, vertikale Miniaturansichtsleiste zum Blättern durch ein seitenadressiertes Dokument.
PDF-Viewer — Ruft PDF-Seiten ab und rendert sie mit Zoom, Paginierung und einer auswählbaren Textebene
PPTX-Viewer — Client-seitiger Best-Effort-Viewer für PowerPoint-PPTX-Präsentationen.
Tabellenkalkulations-Viewer — Ruft .xlsx- und ältere .xls-Arbeitsmappen ab und rendert sie mit Blattregistern und virtualisierten Zeilen.
SVG-Viewer — Ruft ein SVG-Dokument von einer URL ab und rendert es sicher als bereinigtes Inline-SVG.
XML-Viewer — Ein- und ausklappbare, kopierbare Baumansicht zur Inspektion von XML-Dokumenten.

Medien & Dateien

Anhang-Chip — Kompakter Chip für eine an eine Nachricht angehängte Datei, mit Upload-Status, Fortschritt und Wiederholungsoption.
Avatar — Kleines Identitätssymbol, das ein Icon, Bild oder Initialen-Fallback für eine Person oder Entität anzeigt
Animiertes Bild — Spielt ein animiertes GIF/APNG/WebP mit einer Play/Pause-Steuerung ab, die reduzierte Bewegung berücksichtigt.
Animation — Animiert ein per Slot eingefügtes Kind-Element deklarativ mit benannten Voreinstellungen oder benutzerdefinierten Keyframes.
Anhang-Trigger — Kompaktes Bedienelement zum Anhängen, das in einem Chat-Eingabefeld eine Dateiauswahl oder ein Funktionsmenü öffnet.
AV-Player — Audio-/Video-Player mit synchronisiertem Cue-Transkript, Wellenform und Steuerung der Wiedergabegeschwindigkeit.
Avatar-Gruppe — Stapelt überlappende Avatare zu einer kompakten Reihe und fasst überzählige Einträge in einem +N-Badge zusammen
Dropzone — Drag-and-Drop-Wrapper, der einen beliebigen Bereich ohne eigene Dateiauswahl zum Ablageziel für Dateien macht.
Datei-Icon — Lokalisiertes Dateityp-Badge, ermittelt aus MIME-Typ oder Dateiname.
Dateieingabe — Dropzone für Drag-and-Drop und Klick-zum-Durchsuchen, die die ausgewählten Dateien ausgibt.
Flagge — Länder- oder Sprachflagge in einem über Themes anpassbaren, optional runden Rahmen.
Bildvergleich — Verschiebt einen per Tastatur bedienbaren Trenner, um Vorher- und Nachher-Ansichten nebeneinander zu vergleichen.
Bildbetrachter — Vollständiger Raster-Bildbetrachter mit Pan/Zoom, beschrifteten Bereichshervorhebungen und optionaler Annotation.
Lightbox — Vollbild-Modal zur Bildanzeige mit Vor/Zurück-Navigation und Zoom
Landkarte — MapLibre-GL-Kartenwrapper mit deklarativer Legende, Choroplethen-Layer und Markern
Medienkarte — Inline-Vorschau für ein Bild, Video oder einen Datei-Anhang in einer Chat-Nachricht.
Pan und Zoom — Scrollbarer Bereich zum Untersuchen von Slot-Inhalten oder einem Bild mit begrenztem Zoom.
Wiedergabe — Play/Pause-Steuerung, die einen Index in festen Zeitabständen schrittweise durch einen Wertebereich bewegt.
QR-Code — Kodiert einen beliebigen Wert als scanbares QR-Code-Symbol, gerendert auf einem Canvas.
Video — Inline-Video-Player mit individuellen Steuerelementen, wählbaren Untertiteln und Miniaturvorschau.
Video-Playlist — Spielt eine Abfolge von Videos in einer navigierbaren Playlist ab und wechselt automatisch zum nächsten.
Zoombarer Rahmen — Sandboxed iframe-Vorschau mit diskreten Zoom-Steuerelementen; die frühere Oberfläche zur Inspektion von Slot-Inhalten oder Bildern ist jetzt lr-pan-zoom.

Utilities

Intersection Observer — Gibt native Intersection-Einträge aus, wenn per Slot eingefügte Zielelemente in den Viewport eintreten oder ihn verlassen.
Mutation Observer — Überwacht das per Slot eingefügte DOM auf Element- und Attributänderungen und leitet native Mutation-Records weiter
Resize Observer — Überwacht per Slot eingefügte Elemente und gibt typisierte Resize-Einträge aus, ohne eigene visuelle Darstellung
Kopier-Button — Reiner Icon-Button, der einen Textwert in die Zwischenablage kopiert und dies per Häkchen bestätigt.
Diff-Ansicht — Rendert einen echten zeilenbasierten Diff zweier Strings als farbcodierte Unified-Diff-Ausgabe.
Trennlinie — Themebares, semantisches Trennelement zum horizontalen oder vertikalen Unterteilen von Inhalten.
Export-Button — Lädt Tabellendaten als CSV oder JSON herunter – in einem festen Format oder über ein Formatmenü.
Bytes formatieren — Locale-bewusste Formatierung von Byte-Grössen mit einstellbarer Einheitenschrittweite und Genauigkeit.
Datum formatieren — Locale-bewusste Datums- und Zeitformatierung über Intl.DateTimeFormat.
Zahl formatieren — Locale-bewusste Formatierung von Zahlen, Währungen und kompakten Werten über Intl.NumberFormat.
Icon — Rendert scharfe Inline-SVG-Glyphen aus einem integrierten, benannten Pfad-Set – ganz ohne Abhängigkeiten.
JSON-Viewer — Ein- und ausklappbare, kopierbare Baumansicht zur Inspektion beliebiger JSON-Payloads
Bekanntes Datum — Dreiteilige Tag/Monat/Jahr-Eingabe für ein Datum, das der Nutzer bereits kennt
Live-Region — Visuell verborgene ARIA-Live-Region, die Screenreader-Ansagen drosselt
Erwähnungs-Popover — Am Caret verankerte Autovervollständigung für @-Erwähnungen und Slash-Commands in einem Textfeld.
Polling-Status — Countdown bis zur nächsten geplanten Aktualisierung mit integrierter Pause-/Fortsetzen-Steuerung.
Zufallsinhalt — Wechselt zufällig oder der Reihe nach durch die im Slot enthaltenen Kindelemente – ideal für A/B-Texte und Testimonials
Relative Zeit — Zeigt einen locale-bewussten relativen Zeitstempel an, der sich selbstständig aktualisiert.
Tour — Schrittweise geführte Tour mit Spotlight-Effekt für das Onboarding beim ersten Start.
Visuell verborgen — Blendet Inhalt optisch aus, hält ihn aber für Screenreader zugänglich und zeigt ihn bei Fokus wieder an.