Components

70 components: 44 natives every renderer paints, 26 macros built from them.

Layout 10

Boxnativelite

A styled container laid out by the whitelisted style object; the primitive every macro expands into.

Stackmacrolite

A flex container that lays its children out in one direction with a gap.

Gridmacrolite

An equal-column grid for cards and tiles.

Cardmacrolite

A bordered content card with an optional title and description; use it for grouped content, not page headers.

Separatormacrolite

A hairline that divides content.

Listnativelite

A windowed scrolling list; required for anything longer than a screen, children may come from a data template.

Resizablenativelite

Panels split by draggable handles; each child is one panel.

ScrollAreamacrolite

A scrolling region of bounded height or width.

Sidebarmacrolite

A two-column shell: a navigation column (sidebar slot) beside the children, hidden below a breakpoint or when collapsed.

AppBarmacrolite

A top bar with a title, an optional subtitle and back button, and leading/trailing slots for controls.

Text 6

Textnativelite

A run of text in one of the type styles; prefer dedicated components over inline markdown.

Headingmacrolite

A section or page heading at one of four levels.

Markdownnativelite

Rendered GitHub-flavoured markdown, for prose.

CodeBlocknativelite

Source code in a mono block with built-in syntax colouring, optional line numbers and a copy button.

Kbdmacrolite

A keyboard shortcut drawn as a key cap.

Labelmacrolite

A caption for a control that has no label of its own, with an optional required mark.

Media 6

Imagenative

A picture from a URL, or a placeholder box when it has none.

Iconnativelite

One icon from the shared Lucide registry, by name.

Videonative

An inline video player with native controls.

AudioPlayernative

An inline audio player with a title and native controls.

Avatarnativelite

A round user picture that falls back to initials on a stable hue.

Carouselnative

A horizontally paging scroller; each child is one page.

Navigation 7

Tabsnativelite

Tab navigation; the child at index i is the panel of tab i.

Segmentednativelite

ONE row of segments selecting one or many values: the pill-track segmented control, bare toggles, joined outline buttons or a bottom bar of destinations.

Accordionnative

Collapsible sections; the child at index i is the body of item i.

Collapsiblemacrolite

One disclosure section with a title row that shows or hides its children.

Paginationmacro

Previous, next and the current page out of a total.

Breadcrumbmacrolite

The path to the current page; every item but the last is a link that fires select with its value.

Steppermacrolite

Wizard progress: numbered steps, finished ones ticked.

Overlays 7

Dialognative

A centred modal over the surface, opened by its trigger slot or by binding open.

Drawernative

A panel sliding in from an edge (a bottom sheet on phones).

AlertDialogmacro

A modal that asks for a confirmation and ignores clicks outside; fires confirm or cancel.

Popovernative

A small panel anchored to its trigger, opened on press.

Tooltipnative

A short hint shown on hover or long-press over its children.

Menunative

A menu of actions, checkboxes, groups and one-level submenus: opened by pressing its child (or a default button) or by right-click / long-press on it.

Toastnative

A transient notice in the toast layer; render one per notice with open bound.

Feedback 9

Badgemacrolite

A small count or status label.

Alertmacrolite

An inline banner with an icon, a title and a message.

Chipmacrolite

A small labelled token: a pill for a filter, label or state, or a rect naming an entity with a glyph or picture, optionally removable.

EmptyStatemacrolite

A centred icon, title and explanation for an empty list, with an optional action.

Progressmacrolite

A horizontal progress bar with an optional label.

Metermacrolite

A usage track: a bar of coloured segments against a maximum, with a caption and a value.

Ringnativelite

A circular progress ring for a fraction, sized like an icon.

Spinnernative

An indeterminate activity indicator.

Skeletonnativelite

A shimmering placeholder block while content loads.

Data 3

Tablenative

A data table of typed columns over rows: sorting, row selection, widths, alignment, windowed; a slot column renders a component per cell.

Chartnative

A bar, stacked-bar, line, area, pie, donut or sparkline chart with axes, legend and tooltip, as wide as its box.

Sparklinemacro

A tiny inline trend line of recent values, no axes or legend.

Actions 3

Buttonnativelite

A press target with a label and optional icon (or one custom child).

Linknativelite

Inline link text that opens a URL or fires press.

Togglenative

A two-state button that stays pressed.

Inputs 16

Formnativelite

Collects its fields by name and fires submit with their values once every check passes (a submit Button or Enter submits).

Inputnativelite

A single-line text field.

Textareanativelite

A multi-line text field.

NumberFieldnativelite

A numeric field with steppers, min/max/step clamping and locale formatting.

Checkboxnativelite

A labelled checkbox; bind checked.

Radionative

A labelled group of radio options choosing one value; bind value.

Switchnativelite

A labelled on/off switch; bind checked.

Slidernative

A range slider between min and max; bind value.

Ratingmacrolite

A row of stars scoring out of max; readOnly only displays.

Selectnativelite

A dropdown picker of one or many options; searchable makes it a filtering combobox, source a host list.

ChipInputnativelite

A multi-value field of removable chips (Enter or comma adds); bind values.

DatePickernativelite

A calendar date field (ISO yyyy-mm-dd).

DateRangePickernativelite

A two-date range field with one calendar (ISO dates).

TimePickernativelite

A time-of-day field (HH:mm) picked from a list every step minutes, or typed.

FileUploadnativelite

A drop zone with a browse button; files reach the host via upload, which lists them back in files.

Composernativelite

The chat input box: a growing text field with a submit button and optional attachments.

Lists 3

Sectionmacrolite

A band header over hairline-divided rows: a title with an optional caption, count and glyph, foldable, tinted; no title = just the rows.

Groupmacrolite

A form-field container: a rounded group of rows with an optional title and footnote.

Rowmacrolite

THE list row: a lead glyph or slot, a mono identifier, a title with a subtitle, trailing meta or a readable value, a slot and a chevron.