Components

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.

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.

Console mixer strips — title, fader, level meter with dB scale, value, and controls — whose rows line up across a Mixer even when a strip leaves a part out.

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, contrast helpers, and a gradient editor with draggable stops.

Searchable single-select with input and floating option list.

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

Searchable, virtualized emoji grid with skin-aware cells, an active emoji footer, and an emoji-or-icon tabbed variant.

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

Form wrapper that coordinates field validation and returned errors.

Searchable icon grid and color swatches using an app-supplied icon catalog.

Text field primitive sized and styled to match other controls.

Joined input wrapper for addons, icons, and a shared focus indicator.

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 or 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.

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

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.

Persistent anchored tip for onboarding tours, walkthroughs, and new-feature announcements — dismissible, with optional media and step counter.

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

Location trail with links, the current page, and collapsed levels.

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.

Inline status panel for callouts, errors, and notices.

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

Always-mounted polite status region that announces changes to assistive technology.

Determinate task progress with optional label and value rows.

Loading placeholders with seamless shimmer, pulse, and static variants. Match their dimensions to the incoming content.

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

Animated hand-off between the states of a button or label: copied, pending, done.

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

Stacked disclosure rows with measured panel animation.

The application container: persistent navigation and header around changing page content, with one shared scroll policy.

Holds a ratio computed at runtime. Ratios known at build time need no component: aspect-video, aspect-square, aspect-[4/3].

Content surface for panels, tiles, and settings groups.

Accessible disclosure primitive with measured open and close motion.

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

Node graph editor parts that skin React Flow with Control UI tokens.

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

A compact control that expands into settings, workspace navigation, or an inline confirmation, with stable alignment and keyboard dismissal.

Page shell that owns the scroll container, the shared measure, and the title and actions row.

Accessible resizable panel groups and split layouts with keyboard support.

Edge and corner grip for resizing a positioned box; the host owns the drag math.

Scroll container with overlay or space-reserving scrollbars, edge fades, and optional progressive blur.

Responsive app sidebar with resizing, offcanvas and icon collapse, double sidebar layers, mobile navigation, and nested menus.

Profile image with initials fallback and composable overlapping groups.

Compact status, label, or count chip.

Gradient-first charts on TanStack Charts: themed host, presets that return real definitions, and the full grammar.

List row with media, content, and trailing actions.

Keyboard shortcut chip and chord group.

Live audio level in dBFS with warning and clip zones and a peak hold, painted without React renders.

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

Horizontal or vertical hairline divider.

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.

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

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

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

Heading and Text over the token-driven type scale: level is the document outline, size is the rung, tone is the color role, className stays layout-only. A bare text-* rung is for HTML React doesn't render as components, such as email HTML; MDX maps its tags to Heading and Text.

CSS-driven backdrop blur that grows toward an edge, with masked layers and interruptible staggered transitions.

Secondary content that appears while its scope is hovered, focused, or holds an open menu, and always shows on touch.

Shared fluid hover, keyboard-focus, and selection highlight for custom lists and groups, with CSS anchors and a measured fallback.