Components

The Native SDK ships a built-in component catalog with house-style defaults: neutral surfaces, sharp Geist typography, subtle borders, focus states, compact density, and token-driven color, radius, shadow, and motion. Every preview below is rendered by the engine itself — the deterministic reference renderer draws the same widgets your app ships, pixel for pixel, in both color schemes. Each card shows one representative rendering; the component's page has the full set of variations.

Native markup is the view language: every page leads with the component's element — its tags, attributes, and bindings, sourced from the markup validator's vocabulary. Where a sample dispatches into app logic, the core side appears in both authoring languages, TypeScript first with the Zig form one tab away. Each page closes with the component's programmatic construction — the canvas.Ui builder, for Zig views built without markup. For layout semantics, expressions, and the runtime contract, see Native UI.

The Accordion component rendered by the engine (light theme)

Disclosure surface with a model-owned open state.

The Alert component rendered by the engine (light theme)

Inline callouts with icon and variant color.

Initials fallback and runtime-registered images.

The Badge component rendered by the engine (light theme)

Status labels in every variant.

The Breadcrumb component rendered by the engine (light theme)

Hierarchy trail with separators.

The Bubble component rendered by the engine (light theme)

Chat-message surfaces for either side.

The Button component rendered by the engine (light theme)

Variants, sizes, inline icons, and states.

The Button Group component rendered by the engine (light theme)

Attached action buttons as one segmented bar.

The Card component rendered by the engine (light theme)

The bordered, elevated surface container.

The Chart component rendered by the engine (light theme)

Line, bar, and band series (Zig builder).

The Checkbox component rendered by the engine (light theme)

Binary choice with model-owned state.

The Code component rendered by the engine (light theme)

Highlighted source with line numbers and optional horizontal scrolling.

The Combobox component rendered by the engine (light theme)

Text entry with an anchored suggestions menu.

The Dialog component rendered by the engine (light theme)

Modal surface with model-owned dismissal.

The Drawer component rendered by the engine (light theme)

Side-anchored modal surface.

The Dropdown Menu component rendered by the engine (light theme)

Anchored floating menus and menu items.

The built-in vector icon registry.

The Input component rendered by the engine (light theme)

Single-line text entry: input, text field, search field.

The Input Group component rendered by the engine (light theme)

One bordered field: textarea plus accessory actions.

The List component rendered by the engine (light theme)

Rows with icons, selection, and virtualization.

The Markdown component rendered by the engine (light theme)

GFM rendering through native widgets.

The Media Surface component rendered by the engine (light theme)

Externally produced textures: video, camera, mpv.

The Pagination component rendered by the engine (light theme)

Page navigation row.

The Panel component rendered by the engine (light theme)

The plain surface container.

The Progress component rendered by the engine (light theme)

Determinate progress bar.

The Radio component rendered by the engine (light theme)

Single choice within a radio group.

The Resizable component rendered by the engine (light theme)

Panel with an engine-managed drag handle.

The Scroll component rendered by the engine (light theme)

Scroll regions with model-observable offsets.

The Select component rendered by the engine (light theme)

Trigger plus the anchored dropdown options pattern.

The Segmented Control component rendered by the engine (light theme)

Segmented Control

Standalone selected segments with typed press events.

The Separator component rendered by the engine (light theme)

Hairline rules, horizontal and vertical.

The Sheet component rendered by the engine (light theme)

Bottom-anchored modal surface.

The Skeleton component rendered by the engine (light theme)

Loading placeholders that sketch the content.

The Slider component rendered by the engine (light theme)

Continuous value control.

The Spacer component rendered by the engine (light theme)

Flexible empty space between siblings.

The Spinner component rendered by the engine (light theme)

Indeterminate progress leaf.

The Split component rendered by the engine (light theme)

Draggable two-pane splitter.

The Status Bar component rendered by the engine (light theme)

Window-bottom status text.

The Stepper component rendered by the engine (light theme)

Stage progress with completed/active/pending steps.

The Switch component rendered by the engine (light theme)

On/off switches with model-owned state.

The Table component rendered by the engine (light theme)

Rows and cells with hairline dividers.

The Tabs component rendered by the engine (light theme)

Tab strip over segmented controls.

The Textarea component rendered by the engine (light theme)

Multi-line text entry.

The Timeline component rendered by the engine (light theme)

Ledger list with indicators and connectors.

The Toggle component rendered by the engine (light theme)

Pressed-state toggles, toggle buttons, and groups.

The Tooltip component rendered by the engine (light theme)

The floating label above the control it annotates.

The Tree component rendered by the engine (light theme)

Disclosure tree with one roving focus set.

The Video component rendered by the engine (light theme)

Platform-decoded playback with house transport chrome.

The Virtual List component rendered by the engine (light theme)

Windowed rows: the view builds only what's visible.