--- title: "Komponenten — zenit Zig UI" description: "51 öffentliche Komponenten und 13 Fähigkeits-Labs. Jeder Clip ist das Metal-Drawable eines echten zenit-Storybook-Fensters, gesteuert vom E2E-Harness…" url: https://zenit.z.express/de/components language: de alternate_en: https://zenit.z.express/components.md alternate_zh: https://zenit.z.express/zh/components.md alternate_es: https://zenit.z.express/es/components.md alternate_ja: https://zenit.z.express/ja/components.md alternate_ko: https://zenit.z.express/ko/components.md alternate_fr: https://zenit.z.express/fr/components.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- # Komponenten 51 öffentliche Komponenten und 13 Fähigkeits-Labs. Jeder Clip ist das Metal-Drawable eines echten zenit-Storybook-Fensters, gesteuert vom E2E-Harness; Quellcode und Props werden direkt aus dem Repository extrahiert. [Button`ui.widgets.Button`Primäre, sekundäre, destruktive, linkartige und reine Icon-Buttons.](https://zenit.z.express/de/components/button)[Checkbox`ui.widgets.Checkbox`Ein unabhängiger Boolean mit den Zuständen nicht markiert, markiert und unbestimmt.](https://zenit.z.express/de/components/checkbox)[Switch`ui.widgets.Switch`Ein Schalter für Einstellungen, die sofort wirken.](https://zenit.z.express/de/components/switch)[Radio`ui.widgets.RadioGroup`Genau einen Wert aus sich gegenseitig ausschließenden Optionen wählen.](https://zenit.z.express/de/components/radio)[Slider`ui.widgets.Slider`Einen Wert auf einem stufenlosen oder gestuften Bereich wählen.](https://zenit.z.express/de/components/slider)[Rate`ui.widgets.Rate`Sternebewertungen oder Bewertungen mit begrenzter Anzahl.](https://zenit.z.express/de/components/rate)[NumberStepper`ui.widgets.NumberStepper`Präzises Erhöhen und Verringern für Mengen und Parameter.](https://zenit.z.express/de/components/stepper)[Input`ui.widgets.Input`Einzeilige Eingabe für Text, E-Mail, Passwort und Suche.](https://zenit.z.express/de/components/input)[Textarea`ui.widgets.Textarea`Mehrzeilige Bearbeitung mit den Zuständen helper, error und disabled.](https://zenit.z.express/de/components/textarea)[Select`ui.widgets.Select`Einfach-, Mehrfach-, löschbare und durchsuchbare Auswahlfelder.](https://zenit.z.express/de/components/select)[Form Composition`Input · Select · Button`Input, Select und Button gemischt in einer Größe: eine Filterleiste und ein Geschäftsformular.](https://zenit.z.express/de/components/formcompose)[ComboBox`ui.widgets.ComboBox`Eine durchsuchbare, filterbare Eingabe, die ihren Wert zurückschreibt.](https://zenit.z.express/de/components/combobox)[TagsInput`ui.widgets.TagsInput`Viele Tokens per Tastatur eingeben.](https://zenit.z.express/de/components/tags)[FileUpload`ui.widgets.FileUpload`Dateiauswahl und Ablagebereich.](https://zenit.z.express/de/components/upload)[DatePicker`ui.widgets.DatePicker`Ein Datum eingeben oder aus einem Kalender wählen.](https://zenit.z.express/de/components/datepicker)[DateRangePicker`ui.widgets.DateRangePicker`Ein Start- und ein Enddatum wählen.](https://zenit.z.express/de/components/daterange)[Form`ui.widgets.FormOf(T)`Typisierter Formularzustand, Feldmetadaten und Validierungszeitpunkt.](https://zenit.z.express/de/components/form)[Badge`ui.widgets.Badge`Zurückhaltender Status, Zähler und semantische Labels.](https://zenit.z.express/de/components/badge)[Tag`ui.widgets.Tag`Schließbare oder schreibgeschützte Kategorie-Labels.](https://zenit.z.express/de/components/tag)[Chip`ui.widgets.Chip`Kompakte Auswahl, Filter oder Tokens mit Icon.](https://zenit.z.express/de/components/chip)[Card`ui.widgets.Card`Fasst Titel, Inhalt und interaktive Fläche zu einer Einheit zusammen.](https://zenit.z.express/de/components/card)[Alert`ui.widgets.Alert`Dauerhaftes Feedback innerhalb der Seite.](https://zenit.z.express/de/components/alert)[Progress`ui.widgets.Progress`Bestimmter und unbestimmter Fortschritt.](https://zenit.z.express/de/components/progress)[Spinner`ui.widgets.Spinner`Eine kompakte Animation für kurze Wartezeiten.](https://zenit.z.express/de/components/spinner)[Skeleton`ui.widgets.Skeleton`Platzhalterstruktur, während Inhalte laden.](https://zenit.z.express/de/components/skeleton)[Timeline`ui.widgets.Timeline`Vertikale Ereignisse nach Zeit oder Status.](https://zenit.z.express/de/components/timeline)[Breadcrumb`ui.widgets.Breadcrumb`Zeigt den aktuellen Ort und seine übergeordneten Ebenen.](https://zenit.z.express/de/components/breadcrumb)[Steps`ui.widgets.Steps`Erledigte, aktuelle und ausstehende Zustände einer mehrstufigen Aufgabe.](https://zenit.z.express/de/components/steps)[Tree`ui.widgets.Tree`Hierarchien, Dateibäume und aufklappbare Strukturen.](https://zenit.z.express/de/components/tree)[Table`ui.widgets.Table`Eine einfache Tabelle mit festen Spalten und eigenen Zellen.](https://zenit.z.express/de/components/table)[DataTable`ui.widgets.DataTable`Eine Datentabelle mit Filterung, Paginierung und Spaltenverhalten.](https://zenit.z.express/de/components/datatable)[Calendar`ui.widgets.Calendar`Datumsnavigation und -auswahl in der Monatsansicht.](https://zenit.z.express/de/components/calendar)[Markdown`ui.widgets.Markdown`Rendert eine unterstützte Markdown-Teilmenge als native Nodes.](https://zenit.z.express/de/components/markdown)[Icons`ui.system_icons`Anbieterneutrale semantische Icon-Rollen, Größen und Färbungen.](https://zenit.z.express/de/components/icons)[Tabs`ui.widgets.Tabs`Zwischen gleichrangigen Ansichten in einem Kontext wechseln.](https://zenit.z.express/de/components/tabs)[Accordion`ui.widgets.Accordion`Abschnitte ein- und ausklappen.](https://zenit.z.express/de/components/accordion)[Menu`ui.widgets.Menu`Kontextaktionen mit Tastenkürzel-Hinweisen.](https://zenit.z.express/de/components/menu)[DropdownMenu`ui.widgets.DropdownMenu`Eine Reihe von Befehlen, die sich über einen Button öffnet.](https://zenit.z.express/de/components/dropdown)[Notification`ui.widgets.Notifier`Nicht blockierende Benachrichtigungen: neun Arten, Fortschritt, Aktionen, Stapelung und acht Andockpositionen.](https://zenit.z.express/de/components/notification)[Tooltip`ui.widgets.Tooltip`Kurze ergänzende Hinweise für Bedienelemente.](https://zenit.z.express/de/components/tooltip)[Popover`ui.widgets.Popover`Reichhaltigerer temporärer Inhalt als ein Tooltip.](https://zenit.z.express/de/components/popover)[Modal`ui.widgets.Modal`Blockierende Aufgaben, Bestätigungen und fokussierter Kontext.](https://zenit.z.express/de/components/modal)[Sheet`ui.widgets.Sheet`Ein Seitenpanel, das vom Fensterrand hereingleitet.](https://zenit.z.express/de/components/sheet)[GlassBox`ui.widgets.GlassBox`Eine Glasoberfläche mit echtem Hintergrund-Blur.](https://zenit.z.express/de/components/glassbox)[Divider`ui.widgets.Divider`Horizontale, vertikale und beschriftete Trenner.](https://zenit.z.express/de/components/divider)[Stack`ui.widgets.HStack / VStack`Übliche horizontale und vertikale Anordnung.](https://zenit.z.express/de/components/stack)[Layout / Box Model`ui.box`Eine Abdeckungsmatrix für Boxmodell, Prozentwerte, absolute Positionierung, Flex / Grid und Clipping.](https://zenit.z.express/de/components/layoutbox)[VirtualList`ui.widgets.VirtualList`Bindet von großen gleichförmigen Listen nur den sichtbaren Ausschnitt ein.](https://zenit.z.express/de/components/virtuallist)[VirtualList (Dynamic)`ui.widgets.VirtualList`Eine virtuelle Liste mit variablen Zeilenhöhen.](https://zenit.z.express/de/components/virtuallistdynamic)[ScrollArea`ui.widgets.mountScrollArea`Selbst gezeichnetes Scrollen, Scrollbars und programmatische Positionierung.](https://zenit.z.express/de/components/scrollarea)[Grid`ui.widgets.mountGrid`Zweidimensionale Zeilen und Spalten mit eigenen Zellen.](https://zenit.z.express/de/components/grid)[GlassLab`ui.widgets.GlassBox`Eine GlassBox-Optikbank: Brechung, Randbreite und Vergrößerung.](https://zenit.z.express/de/components/glasslab)[GlassIslands`ui.widgets.GlassBox`Mehrere Glasinseln über einem Hintergrund.](https://zenit.z.express/de/components/glassislands)[GlassMotion`ui.widgets.GlassBox`Sich verformendes Glas und eine Toolbar, die beim Scrollen schwebt.](https://zenit.z.express/de/components/glassmotion)[GlassChrome`ui.widgets.GlassBox`App-Chrome: gläserne Titel- und Werkzeugleiste über scrollendem Inhalt.](https://zenit.z.express/de/components/glasschrome)[CanvasEvents`ui.events`Ereignisse auf Canvas-Ebene: Scrollen, Zoomgeste, Ziehen und ein PNG-Hin-und-Zurück über die Zwischenablage.](https://zenit.z.express/de/components/canvasevents)[Drag`ui.interaction`Ziehen und ein horizontaler Größenänderungsgriff.](https://zenit.z.express/de/components/drag)[Gestures`ui.interaction`Gestenarbitrierung für Einfach-, Doppel-, Dreifachklick und langes Drücken.](https://zenit.z.express/de/components/multiclick)[AnimControls`ui.fx`Animationssteuerung: Yoyo, Timelines, Keyframes und Federn.](https://zenit.z.express/de/components/animctl)[VectorPath`ui.path`Vektorpfad-Geometrie: Kontur, Füllung und Hit-Testing.](https://zenit.z.express/de/components/vectorpath)[BlendModes`ui.box`Mischmodi und Deckkraft-Compositing.](https://zenit.z.express/de/components/blend)[Emoji`ui.text`Farbige Emoji, ZWJ-Sequenzen und Hautton-Modifikatoren.](https://zenit.z.express/de/components/emoji)[RTL`ui.text`Gemischter Text aus Arabisch, Hebräisch und Latein.](https://zenit.z.express/de/components/rtl)[WordNav`ui.widgets.Textarea`Wortweise Cursorbewegung über Schriftsysteme hinweg.](https://zenit.z.express/de/components/wordnav)