--- title: "Components | zenit Zig UI" description: "51 public components and 13 capability labs. Every clip is the Metal drawable of a real zenit Storybook window driven by the E2E harness; source and props…" url: https://ui.surf/zenit/components language: en alternate_zh: https://ui.surf/zenit/zh/components.md alternate_es: https://ui.surf/zenit/es/components.md alternate_ja: https://ui.surf/zenit/ja/components.md alternate_ko: https://ui.surf/zenit/ko/components.md alternate_fr: https://ui.surf/zenit/fr/components.md alternate_de: https://ui.surf/zenit/de/components.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- # Components 51 public components and 13 capability labs. Every clip is the Metal drawable of a real zenit Storybook window driven by the E2E harness; source and props are extracted straight from the repo. [Button`ui.widgets.Button`Primary, secondary, destructive, link-style and icon-only buttons.](https://ui.surf/zenit/components/button)[Checkbox`ui.widgets.Checkbox`An independent boolean with unchecked, checked and indeterminate states.](https://ui.surf/zenit/components/checkbox)[Switch`ui.widgets.Switch`A toggle for settings that apply immediately.](https://ui.surf/zenit/components/switch)[Radio`ui.widgets.RadioGroup`Pick exactly one value from mutually exclusive options.](https://ui.surf/zenit/components/radio)[Slider`ui.widgets.Slider`Choose a value on a continuous or stepped range.](https://ui.surf/zenit/components/slider)[Rate`ui.widgets.Rate`Star or bounded-count ratings.](https://ui.surf/zenit/components/rate)[NumberStepper`ui.widgets.NumberStepper`Precise increment and decrement for quantities and parameters.](https://ui.surf/zenit/components/stepper)[Input`ui.widgets.Input`Single-line text, email, password and search input.](https://ui.surf/zenit/components/input)[Textarea`ui.widgets.Textarea`Multi-line editing with helper, error and disabled states.](https://ui.surf/zenit/components/textarea)[Select`ui.widgets.Select`Single, multiple, clearable and searchable pickers.](https://ui.surf/zenit/components/select)[Form Composition`Input · Select · Button`Input, Select and Button mixed at one size: a filter toolbar and a business form.](https://ui.surf/zenit/components/formcompose)[ComboBox`ui.widgets.ComboBox`A searchable, filterable input that writes back its value.](https://ui.surf/zenit/components/combobox)[TagsInput`ui.widgets.TagsInput`Enter many tokens from the keyboard.](https://ui.surf/zenit/components/tags)[FileUpload`ui.widgets.FileUpload`File picking and a drop target.](https://ui.surf/zenit/components/upload)[DatePicker`ui.widgets.DatePicker`Enter a single date or pick it from a calendar.](https://ui.surf/zenit/components/datepicker)[DateRangePicker`ui.widgets.DateRangePicker`Pick a start and an end date.](https://ui.surf/zenit/components/daterange)[Form`ui.widgets.FormOf(T)`Typed form state, field metadata and validation timing.](https://ui.surf/zenit/components/form)[Badge`ui.widgets.Badge`Low-emphasis status, counts and semantic labels.](https://ui.surf/zenit/components/badge)[Tag`ui.widgets.Tag`Closable or read-only category labels.](https://ui.surf/zenit/components/tag)[Chip`ui.widgets.Chip`Compact choices, filters or icon tokens.](https://ui.surf/zenit/components/chip)[Card`ui.widgets.Card`Groups a title, body and interactive surface into one unit.](https://ui.surf/zenit/components/card)[Alert`ui.widgets.Alert`Persistent in-page feedback.](https://ui.surf/zenit/components/alert)[Progress`ui.widgets.Progress`Determinate and indeterminate progress.](https://ui.surf/zenit/components/progress)[Spinner`ui.widgets.Spinner`A compact animation for short waits.](https://ui.surf/zenit/components/spinner)[Skeleton`ui.widgets.Skeleton`Placeholder structure while content loads.](https://ui.surf/zenit/components/skeleton)[Timeline`ui.widgets.Timeline`Vertical events by time or status.](https://ui.surf/zenit/components/timeline)[Breadcrumb`ui.widgets.Breadcrumb`Shows the current location and its ancestors.](https://ui.surf/zenit/components/breadcrumb)[Steps`ui.widgets.Steps`Done, current and pending states of a multi-stage task.](https://ui.surf/zenit/components/steps)[Tree`ui.widgets.Tree`Hierarchies, file trees and expandable structures.](https://ui.surf/zenit/components/tree)[Table`ui.widgets.Table`A basic table with fixed columns and custom cells.](https://ui.surf/zenit/components/table)[DataTable`ui.widgets.DataTable`A data table with filtering, paging and column behavior.](https://ui.surf/zenit/components/datatable)[Calendar`ui.widgets.Calendar`Month-view date browsing and selection.](https://ui.surf/zenit/components/calendar)[Markdown`ui.widgets.Markdown`Renders a supported Markdown subset as native nodes.](https://ui.surf/zenit/components/markdown)[Icons`ui.system_icons`Provider-neutral semantic icon roles, sizes and tints.](https://ui.surf/zenit/components/icons)[Tabs`ui.widgets.Tabs`Switch between sibling views in one context.](https://ui.surf/zenit/components/tabs)[Accordion`ui.widgets.Accordion`Collapse and expand sections.](https://ui.surf/zenit/components/accordion)[Menu`ui.widgets.Menu`Contextual actions with shortcut hints.](https://ui.surf/zenit/components/menu)[DropdownMenu`ui.widgets.DropdownMenu`A set of commands opened from a button.](https://ui.surf/zenit/components/dropdown)[Notification`ui.widgets.Notifier`Non-blocking notifications: nine kinds, progress, actions, stacking and eight docking positions.](https://ui.surf/zenit/components/notification)[Tooltip`ui.widgets.Tooltip`Short supplementary hints for controls.](https://ui.surf/zenit/components/tooltip)[Popover`ui.widgets.Popover`Richer transient content than a tooltip.](https://ui.surf/zenit/components/popover)[Modal`ui.widgets.Modal`Blocking tasks, confirmations and focused context.](https://ui.surf/zenit/components/modal)[Sheet`ui.widgets.Sheet`A side panel that slides in from the window edge.](https://ui.surf/zenit/components/sheet)[GlassBox`ui.widgets.GlassBox`A glass surface with a real backdrop blur.](https://ui.surf/zenit/components/glassbox)[Divider`ui.widgets.Divider`Horizontal, vertical and labeled separators.](https://ui.surf/zenit/components/divider)[Stack`ui.widgets.HStack / VStack`Common horizontal and vertical arrangement.](https://ui.surf/zenit/components/stack)[Layout / Box Model`ui.box`A coverage matrix for the box model, percentages, absolute positioning, Flex / Grid and clipping.](https://ui.surf/zenit/components/layoutbox)[VirtualList`ui.widgets.VirtualList`Mounts only the visible window of large uniform lists.](https://ui.surf/zenit/components/virtuallist)[VirtualList (Dynamic)`ui.widgets.VirtualList`A virtual list with variable row heights.](https://ui.surf/zenit/components/virtuallistdynamic)[ScrollArea`ui.widgets.mountScrollArea`Custom-drawn scrolling, scrollbars and programmatic positioning.](https://ui.surf/zenit/components/scrollarea)[Grid`ui.widgets.mountGrid`Two-dimensional rows and columns with custom cells.](https://ui.surf/zenit/components/grid)[GlassLab`ui.widgets.GlassBox`A GlassBox optics bench: refraction, bezel width and magnification.](https://ui.surf/zenit/components/glasslab)[GlassIslands`ui.widgets.GlassBox`Several glass islands over one backdrop.](https://ui.surf/zenit/components/glassislands)[GlassMotion`ui.widgets.GlassBox`Morphing glass and a toolbar that floats while scrolling.](https://ui.surf/zenit/components/glassmotion)[GlassChrome`ui.widgets.GlassBox`App chrome: glass title bar and toolbar over scrolling content.](https://ui.surf/zenit/components/glasschrome)[CanvasEvents`ui.events`Canvas-level events: scroll, magnify, drag and a clipboard PNG round-trip.](https://ui.surf/zenit/components/canvasevents)[Drag`ui.interaction`Dragging and a horizontal resize handle.](https://ui.surf/zenit/components/drag)[Gestures`ui.interaction`Gesture arbitration for single, double, triple click and long-press.](https://ui.surf/zenit/components/multiclick)[AnimControls`ui.fx`Animation control: yoyo, timelines, keyframes and springs.](https://ui.surf/zenit/components/animctl)[VectorPath`ui.path`Vector path geometry: stroke, fill and hit-testing.](https://ui.surf/zenit/components/vectorpath)[BlendModes`ui.box`Blend modes and opacity compositing.](https://ui.surf/zenit/components/blend)[Emoji`ui.text`Color emoji, ZWJ sequences and skin-tone modifiers.](https://ui.surf/zenit/components/emoji)[RTL`ui.text`Arabic, Hebrew and Latin mixed text.](https://ui.surf/zenit/components/rtl)[WordNav`ui.widgets.Textarea`Word-wise cursor movement across scripts.](https://ui.surf/zenit/components/wordnav)