Core

Arrange a page title, status, tabs, actions, and query controls to fit the available width.

Build a dropdown selection with Root, Label, Trigger, Popover, and Item components.

Build condition groups from properties, operators, and values using AND and OR logic.

Show all options in a single-selection control with radio-group semantics and arrow-key navigation.

Copy a value to the clipboard and report success or clipboard permission failures.

Communicate status with a dot and a required text label instead of color alone.

Keep a persistent notice in the page layout while its condition applies, without a dismiss action.

Choose one option with separate group and item descriptions and multiple sizes.

Use labeled checkboxes with descriptions, groups, and an indeterminate state synchronized to the DOM property.

Organize tab panels with Root, TabList, Tab, and TabPanel components.

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

Represent a person or anonymous device in a list cell with name, email, and ID fallbacks.

Present labeled facts in a semantic description list with identifier copying for detail panels.

Explain an empty view with an icon, title, description, and action button.

Show a metric with its value, change, and supporting description. Omit the change row when no comparison is available.

Choose visual options from tiles backed by native radio buttons and checkboxes for keyboard and screen reader access.

Edit titles and metric names in place. Enter confirms, Escape reverts, and rejected saves preserve the input.

Preview and select visualization palettes using categorical swatches or sequential and diverging gradients.

Announce live updates to screen readers with throttled summaries and alternating nodes that can repeat identical messages.

Mark matching search terms with semantic mark elements, matching longer terms first to avoid fragmented overlaps.

Measure text in its actual font and available width to truncate the start, middle, or both ends while preserving the full accessible text.

Read and edit conditions as sentences for alert rules and segment filters that need to be easy to verify.

Filter by field values while reading their counts and distribution bars. Show top values first and collapse the long tail.

Build command search with automatic filtering and keyboard navigation, inline or inside CommandDialog.

Show floating content anchored to a trigger using the Popover primitive.

Compose menu bars and individual menus with checkbox items, radio items, separators, and popovers.

Compose accessible modal dialogs with triggers, headings, descriptions, dismissal controls, and header, body, and footer regions.

Select a star rating from one to N or display a read-only rating.

Enter numbers with step buttons, nullable values, unit suffixes, invalid draft alerts, bounds, and arrow keys.

Add tags with Enter and remove them with Backspace.

Select date ranges with presets, a calendar, managed focus, and direction-aware navigation icons.

Group content in a card with Header, Title, Description, Content, and Footer components.

Enter multiline text with the same label, error, and hint API as Input.

Toggle a setting with three sizes and explicit accessible associations for labels and descriptions.

Use a standalone text input with labels, errors, hints, and icons.

Display inline status badges with five color variants and an optional status dot.

Build accessible forms with opt-ui-primitives Form APIs, field validation, specialized inputs, and shared form store hooks.

Group actions in a toolbar with buttons, separators, and tooltips.

Create animated WebGL backgrounds with ogl, material presets, configurable colors, still frames, PNG capture, and a WebGL fallback.

Catch child rendering errors and display fallback UI with a React error boundary.

Overlay a loading state with one aria-busy live region and no duplicate status announcements.

Render large lists efficiently by windowing visible items.

Navigate pages with ellipses, compact and count variants, total-page or cursor pagination, and previous and next buttons.

Open accessible side or bottom sliding panels with a Dialog-based compound API.

Display an icon and text, an image, or a linked logo in navigation and other layouts.

Create Blocks with enforced BlockLayout wrapping and automatic loading and className handling.

Apply section spacing and optional semantic insets at a Block root, with automatic LoadingOverlay support.

Create draggable split-panel layouts with react-resizable-panels.

Apply semantic section spacing and automatically associate a heading through aria-labelledby.

Center page content within a configurable maximum width.

Provide custom scrollbars for vertical, horizontal, or bidirectional scrolling.

Select a value with a native range input, normalized bounds and ARIA state, and configurable value formatting.

Create a single-trigger dropdown with a convenient wrapper around Menu Core.

Add, remove, and reorder an ordered sequence of steps.

Search grouped icons using semantic Lucide keys or custom React nodes.

Choose colors from a preset palette or enter a hex value.

Show the current location and provide navigation through its hierarchy.

Display a scalar measurement within a range, such as disk usage, score, or capacity, using meter semantics.

Show linear or circular progress in determinate and indeterminate modes with normalized ARIA values.

Represent users with images, generated initials, accessible status indicators, and avatar groups.

Reserve space while loading with text, circular, rectangular, and preset skeleton components.

Show info, success, warning, or error messages with a title, body, and dismiss button.

Indicate loading in three sizes, with an aria-hidden mode for decorative use.

Use accessible buttons with primary, secondary, ghost, and danger variants, three sizes, icons, loading, and aria-busy states.

Build autocomplete search with an input, popover, items, groups, group labels, and an empty state.

Expand and collapse content with Root, Trigger, and Content components.

Navigate child elements in two dimensions with arrow keys using a Composite container.

Stack expandable panels with single, multiple, and collapsible modes.

Use a two-state pressed button alone or in a ToggleGroup for single or multiple selection.

Enter OTP or PIN codes with individual cells, distributed paste, automatic focus, backspace navigation, and form error associations.

Separate content with horizontal or vertical dividers and optional centered labels.

Display keyboard shortcuts as inline key badges.

Control the semantic document hierarchy independently from the visual typography hierarchy.

Apply consistent semantic typography to body text, labels, supporting descriptions, and code.