A component system for native-feeling product software.

Primary action element with primary / ghost / outline variants.

Base text input primitive with leading / trailing slots.

Pill search field with magnifier + ⌘K hint + clear button.

Multi-line text input with optional auto-resize.

Caption / eyebrow for form fields.

Keyboard shortcut hint, styled like a key cap.

Indeterminate progress ring (sm / md / lg).

Generic surface (flat / tinted variants).

Horizontal or vertical rule, solid or dashed.

Pulsing placeholder block for loading states.

Circular user image with initials fallback.

Preset typographic styles with tone overrides.

Labeled form-field wrapper with auto-id and ARIA wiring.

Empty-state placeholder with icon, title, and action.

Max-width content well with auto margins.

Vertical flex column with token-driven gap.

Naming-symmetric twin of HStack — vertical flex.

Horizontal flex row with optional wrap.

Generic flex container with all axes exposed.

Flex helper that fills remaining space.

Flex container that centers children on both axes.

Generic div with token-driven padding and radius shortcuts.

Semantic <section> with display-font title and subtitle.

Locks a child block to a fixed width:height ratio.

Overflow container with native-feel styled scrollbars.

Full-window header / sidebar / main / footer scaffold.

Collapsible side panel with header / body / footer slots.

Horizontal action strip with macOS-flavored chrome.

Page-level header with title / eyebrow / actions.

Page-level main content region.

Page-level footer with bordered top.

Two-pane container with a drag handle between them.

Multi-pane container with hairline dividers (macOS).

Toggle-visibility container built on bits-ui.

Vertical stack of collapsible items.

Grip-dot indicator for resize / reorder targets.

Pill-shaped status / count label.

Toggleable filter pill with optional count.

Colored status dot with halo (idle / running / warn / fail).

Determinate or indeterminate progress bar.

Single label + display-font value pair.

Compact summary card for an in-progress operation.

Circular determinate progress with optional centered label.

Discrete level indicator (battery / signal / score).

Inline mini line chart with optional area fill.

Pressable button with persistent on/off state.

Set of related Toggles bound to one value.

Sliding on/off control (macOS-Settings shape).

Boolean form control with optional label.

Single-select group of radio options.

Single-thumb range input with token-driven chrome.

Numeric text field with ▲▼ Stepper.

Fixed-length OTP / verification code field.

Input with show / hide eye toggle.

Dropdown picker built on bits-ui.

System <select> with our chrome.

Typeahead select with filter-as-you-type.

Month-grid date picker built on bits-ui + @internationalized/date.

Modal overlay built on bits-ui.

Confirmation modal for destructive actions.

Anchored floating panel.

Hover-triggered short label.

Slide-in panel from a screen edge.

Bottom-anchored slide-up sheet.

Pop-up menu of actions (items-based API).

Right-click pop-up menu.

Searchable ⌘K palette with keyboard nav.

Sonner-style toast queue with imperative API.

Sidebar navigation row with dot / label / aside slots.

Pill-style tab strip (vertical / horizontal) with optional counts.

Connected radio buttons sharing one rounded chassis.

Hierarchical navigation trail.

Data-driven HTML table with sortable columns.

Vertical row list with label / description.

Windowed list for large datasets (fixed height).

IntersectionObserver load-more sentinel.

Vertical chronological event list with markers.

Frosted-material section header with leading / trailing slots.

▲▼ connected button pair for increment / decrement.

Window controls (close / min / zoom).

Drag region with centered title for app windows.

Right-side property panel with sectioned rows.

Finder-style sidebar list with icons + counts.

Disclosure tree with chevron toggles.

Vertical trace of a multi-step agent run — status markers per step with inline tool calls.

"AI" label for generated content, with an opt-in shimmer while streaming.

Role-tinted chat message row (assistant / user / tool / system) with avatar slot and metadata.

Streaming chat log container — role=log, bottom-anchored auto-follow, typing dots while busy.

Inline source reference with a hover preview, as a superscript number or a titled chip.

Inline or side-by-side diff for AI edits, with derived line numbers and +/- stats.

Chat composer — auto-growing textarea, action slots, and a send button that flips to stop while busy.

Display block for LLM tool invocations — status rows, diff stats, collapsible group, expandable results.

Result block beneath a tool invocation — headed, scrollable, optionally collapsible, with an error tone.

Three-dot typing pulser with a grammar-aware or custom label.