Default File UI

Button

Primary actions with variants, text sizes, icon sizes, and a plain icon-only style.

Checkbox

Native checkbox with optional label and description, including indeterminate.

Choice Chip

Compact selectable chip for filters. Host owns grouping and multi-select.

Color Picker

Swatch trigger with hex trailing, hover border, and channel editors.

Combobox

Filterable text field with an option list, optional async loading, and custom values.

Content Switcher

Segmented single select for filters and view modes. Does not own tab panels.

Date Picker

Single day and range calendars in a popover, with locale-aware month titles and week start.

Editor

Markdown-backed rich text surface with optional static and floating format toolbars.

File Uploader

Click, drag, or paste target for files with consumer-owned validation. Defaults to images. Use the tile variant for compact square or circle add and replace controls such as profile photos.

Input

Text fields with variants, sizes, labels, icons, clear control, numeric stepper, change or blur value commit, addons, input groups, hover and focus borders, and validation.

Label

Field and section labels with leading and trailing slots, required and optional marks, subtext, control inset alignment, and typography chrome.

Number Slider

Compact labeled Slider convenience with a live numeric readout. Prefer Slider for dual thumb, marks, orientation, or richer value chrome.

Option List

Picker panel with option rows, search, checks, and footer actions. Rows compose List Item. Configure root width and panel match. Select composes this.

Radio Group

Exclusive native radio group with optional heading and per-item labels.

Search Input

Search field with clear control, icon placement, background fill, and hover border.

Select

Single or multi choice field that composes Option List. Rows use List Item chrome. Configure width and open-list sizing. Closed list selection, not free-text autocomplete.

Slider

Single or dual thumb scrubber with marks, orientation, label, and value chrome. Prefer Number Slider for a compact settings row, and Tick Slider for bound labels with a tick gauge.

Switch

Binary on and off control for immediate settings.

Tag Input

Chip field for a string[] value with suggestions, paste batching, and max tags.

Tick Slider

Bound labels, tick gauge, optional purpose title, and floating value bubble.

Toggle Group

Grouped toggle buttons with a clearable string[] selection model. Prefer Content Switcher for exclusive view modes as segments.

Avatar

Person mark with photo or initials, optional presence, and a stacked overflow group.

Badge

Compact labels for status, counts, and metadata.

Empty State

Placeholder for missing or filtered results with glyph, title, description, and optional action.

Featured Icon

Static featured icon shell with chrome variants, semantic colors, sizes, shape, and a plain glyph mode.

Kbd

Keyboard hint chip for shortcuts and key chords.

Overlay Hint

On-canvas instruction or status pill with frosted, muted, and marquee variants.

Progress

Linear progress bar for determinate or indeterminate completion.

Skeleton

Decorative loading placeholder shapes. Always aria-hidden; announce busy state on the host.

Spinner

Indeterminate circular loading indicator.

Status Dot

Filled presence mark for online, live, and similar status chips.

Toast

Transient messages with tone, a leading slot, and screen position.

Tooltip

Compact and detailed labels on hover, focus, or a viewport point.

Command Palette

Searchable command dialog with ranking, optional async source, and recent ids.

Context Menu

Pointer and keyboard menu with nested submenus and an imperative open helper.

Dialog

Center modal with scrim, focus trap, Escape to close, and scroll lock.

Drawer

Edge modal sheet with scrim, focus trap, and Escape to close.

Dropdown Menu

Anchored action menu with header, body, and footer. Rows compose List Item. Prefer Option List for pickers that keep a selected value.

Options Panel

Anchored popover shell with header, body, and footer slots for custom controls. Footer owns gapX and gapY, with FooterActions and FooterMeta for paired actions and status copy. Prefer this over Popover when the surface needs composed controls.

Popover

Anchored panel for mid-range tasks such as share sheets and short forms. Prefer Options Panel for denser inspectors, and Tooltip for hover-only hints.

Accordion

Expandable sections with single or multiple open items.

Border Glow

Pointer directed border glow wrapper with optional soft bloom.

Chart

Chart frame with optional title, description, toolbar, loading and empty states, plus legend and tooltip helpers.

Contents Nav

Page outline and catalogue index composed with List Item. Use toc for on-page headings with optional nest line and scroll spy. Use index for sectioned side navigation.

Data Grid

Virtualized table with resizable columns, selection, and optional cell editing.

Dock Panel

Collapsible edge-docked inspector with a kit scrollbar body. Prefer this for persistent side chrome; prefer Options Panel for anchored temporary controls.

List Item

Configurable row with leading, secondary, trailing, density, muted or accent variants, readOnly presentational rows, and as="button" or asChild link hosts. Includes ListItemLabel for menu and nav section headings, and ListItemNest for indented child groups with an optional guide line. Option List, Select, Combobox, Tag Input, Contents Nav, Sidebar, and Dropdown Menu compose these for selectable options, outlines, and app nav.

Panel Section

Titled groupings for control panels and inspectors.

Scroll Area

Scrollable regions with a custom thumb.

Separator

Horizontal or vertical rules between sections.

Sidebar

Composable primary navigation with provider state, collapse modes, and a List Item menu hierarchy.

Split

Two-pane layout with a keyboard and pointer resizable separator.

Tabs

Panel switcher with pill, line, and segment variants. Prefer Content Switcher when you only switch mode without tab panels.

Timeline

Virtualized timeline with time-scale bars, dependency paths, and snapped drag edits.

Tool Rail

Fixed icon-over-label edge rail for switching tools or modes.

Widget Grid

Draggable and resizable widget layout on a CSS grid with keyboard edit affordances.

Spectrum Text

Inline text with a shifting multi stop gradient fill.

Text Mark

Hand drawn text marks: highlight wash, underline, circle, and related annotation kinds.

Floating Controls

Modular action strip for canvas toolbars and docks.

Format Toolbar

Rich text formatting toolbar with headings, marks, lists, callouts, and table row and column actions.