Primitives

CSS aspect-ratio wrapper for media and previews.

Non-modal workspace panel that moves between two explicit edge slots with a mobile Drawer fallback.

Pan-and-zoom spatial workspace for arranging content without fixed bounds.

Accessible disclosure surface that morphs between explicit collapsed and expanded dimensions.

Accessible resizable panel groups and split layouts with keyboard support.

Scroll container with overlay scrollbars and edge fades.

Responsive app sidebar with collapse, mobile sheet, and keyboard toggle support.

Accessible action button with size, variant, and semantic tone support.

Joined button group for toolbars, split actions, and segmented controls.

Command palette with token-matched dialog, input, and result rows.

Pointer-positioned right-click and long-press menu with nested actions and selection controls.

Dropdown menu for actions, resources, labels, separators, and submenus.

Desktop command bar with nested menus, shortcuts, and separators.

Pressed-state button and toggle group built on the Button surface.

Roving-focus toolbar for editor controls and compact actions.

Caret-anchored command or mention menu for text editors.

Free-text input with search-as-you-type suggestions.

Date selection grid built on react-day-picker and themed through tokens.

Single checkbox control with checked and indeterminate states.

Multi-select checkbox set with shared state and select-all support.

Color input with picker UI, formats, presets, and contrast helpers.

Searchable single-select with input and floating option list.

Composable file intake with validation, managed selection, and drag-activated overlays.

Form field wrapper for labels, descriptions, errors, and validity state.

Form wrapper that coordinates field validation and returned errors.

CSS gradient editor with draggable stops and live preview.

Text field primitive sized and styled to match other controls.

Joined input wrapper for addons, icons, and focus-within rings.

One-time-code field with grouped, focus-aware slots.

Native select control styled to match the Control UI control family.

Numeric input with stepper buttons and optional drag-to-change behavior.

International phone field with country search, E.164 values, and Zod validation helpers.

Single-choice radio set for plans, filters, and option lists.

Single-choice picker with a token-matched trigger and floating list.

Single-value range control with branded and plain treatments.

On/off control with token-driven track, thumb, and press motion.

Multiline text field with CSS-first auto-growth.

Site navigation menu with a shared animated viewport.

Page navigation for long lists and result sets.

Static and interactive workflow steps with horizontal and vertical layouts.

Sticky in-page navigation with scroll-spy range highlighting.

Segmented and browser-style navigation with a stable active indicator.

Modal confirmation dialog for destructive or blocking decisions.

Modal dialog for focused tasks, confirmations, and custom panels.

Swipeable edge panel for mobile sheets and off-canvas surfaces.

Hover or focus preview panel for profiles, links, and contextual details.

Anchored floating panel for inline settings and contextual content.

Modal dialog on desktop that becomes a swipeable bottom drawer on mobile.

Hover or focus hint popup with Base UI positioning and Control UI tokens.

Inline status panel for callouts, errors, and notices.

Empty-state layout for blank lists, zero results, and new workspaces.

Determinate task progress with optional label and value rows.

Loading placeholder with a token-driven shimmer.

Accessible loading indicator for pending buttons, panels, and inline waits.

Transient notifications with a callable toast API and single Toaster mount.

Stacked disclosure rows with measured panel animation.

Profile image with initials fallback and composable overlapping groups.

Compact status, label, or count chip.

Content surface for panels, tiles, and settings groups.

Shared code surface: Shiki-highlighted lines, gutter, clean copy, and virtualization for large files.

Unified or split diff from a git patch or a before/after pair, with word-level intra-line highlighting.

Accessible disclosure primitive with measured open and close motion.

List row with media, content, and trailing actions.

Keyboard shortcut chip and chord group.

Rendered agent markdown (GFM) whose code fences compose Code, and diff fences compose CodeDiff.

Static range meter for quota, storage, score, or usage values.

Responsive data table for lists, comparisons, and structured records.

Static chronological events with independent status, connectors, descriptions, and metadata.

Accessible tree view with roving keyboard navigation, single/multi selection, and animated disclosure.

The token-driven type scale — one --text-* rung per size, named by role. Publish the utilities, not a component.