Native SDK
4.3k

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.

Each component is expressible declaratively in Native markup and programmatically through the canvas.Ui builder; every page shows both forms plus the component's attributes, sourced from the markup validator's vocabulary. For layout semantics, expressions, and the runtime contract, see Native UI.

The Accordion component rendered by the engine (light theme)
Accordion
Disclosure surface with a model-owned open state.
The Alert component rendered by the engine (light theme)
Alert
Inline callouts with icon and variant color.
The Avatar component rendered by the engine (light theme)
Avatar
Initials fallback and runtime-registered images.
The Badge component rendered by the engine (light theme)
Badge
Status labels in every variant.
The Breadcrumb component rendered by the engine (light theme)
Breadcrumb
Hierarchy trail with separators.
The Bubble component rendered by the engine (light theme)
Bubble
Chat-message surfaces for either side.
The Button component rendered by the engine (light theme)
Button
Variants, sizes, inline icons, and states.
The Button Group component rendered by the engine (light theme)
Button Group
Attached action buttons as one segmented bar.
The Card component rendered by the engine (light theme)
Card
The bordered, elevated surface container.
The Chart component rendered by the engine (light theme)
Chart
Line, bar, and band series (Zig builder).
The Checkbox component rendered by the engine (light theme)
Checkbox
Binary choice with model-owned state.
The Combobox component rendered by the engine (light theme)
Combobox
Text entry with an anchored suggestions menu.
The Dialog component rendered by the engine (light theme)
Dialog
Modal surface with model-owned dismissal.
The Drawer component rendered by the engine (light theme)
Drawer
Side-anchored modal surface.
The Dropdown Menu component rendered by the engine (light theme)
Dropdown Menu
Anchored floating menus and menu items.
The Icon component rendered by the engine (light theme)
Icon
The built-in vector icon registry.
The Input component rendered by the engine (light theme)
Input
Single-line text entry: input, text field, search field.
The Input Group component rendered by the engine (light theme)
Input Group
One bordered field: textarea plus accessory actions.
The List component rendered by the engine (light theme)
List
Rows with icons, selection, and virtualization.
The Markdown component rendered by the engine (light theme)
Markdown
GFM rendering through native widgets.
The Pagination component rendered by the engine (light theme)
Pagination
Page navigation row.
The Panel component rendered by the engine (light theme)
Panel
The plain surface container.
The Progress component rendered by the engine (light theme)
Progress
Determinate progress bar.
The Radio component rendered by the engine (light theme)
Radio
Single choice within a radio group.
The Resizable component rendered by the engine (light theme)
Resizable
Panel with an engine-managed drag handle.
The Scroll component rendered by the engine (light theme)
Scroll
Scroll regions with model-observable offsets.
The Select component rendered by the engine (light theme)
Select
Trigger plus the anchored dropdown options pattern.
The Separator component rendered by the engine (light theme)
Separator
Hairline rules, horizontal and vertical.
The Sheet component rendered by the engine (light theme)
Sheet
Bottom-anchored modal surface.
The Skeleton component rendered by the engine (light theme)
Skeleton
Loading placeholders that sketch the content.
The Slider component rendered by the engine (light theme)
Slider
Continuous value control.
The Spacer component rendered by the engine (light theme)
Spacer
Flexible empty space between siblings.
The Spinner component rendered by the engine (light theme)
Spinner
Indeterminate progress leaf.
The Split component rendered by the engine (light theme)
Split
Draggable two-pane splitter.
The Status Bar component rendered by the engine (light theme)
Status Bar
Window-bottom status text.
The Stepper component rendered by the engine (light theme)
Stepper
Stage progress with completed/active/pending steps.
The Switch component rendered by the engine (light theme)
Switch
On/off switches with model-owned state.
The Table component rendered by the engine (light theme)
Table
Rows and cells with hairline dividers.
The Tabs component rendered by the engine (light theme)
Tabs
Tab strip over segmented controls.
The Textarea component rendered by the engine (light theme)
Textarea
Multi-line text entry.
The Timeline component rendered by the engine (light theme)
Timeline
Ledger list with indicators and connectors.
The Toggle component rendered by the engine (light theme)
Toggle
Pressed-state toggles, toggle buttons, and groups.
The Tooltip component rendered by the engine (light theme)
Tooltip
The floating label above the control it annotates.
The Tree component rendered by the engine (light theme)
Tree
Disclosure tree with one roving focus set.
The Virtual List component rendered by the engine (light theme)
Virtual List
Windowed rows: the view builds only what's visible.