Every component, accounted for.

Pill-shaped buttons come in three variants. Use primary for the main action, secondary for supporting actions, and tertiary for quieter actions. Apply the critical tone to destructive actions at any level of emphasis. Small, medium, and large have minimum heights of 28px, 34px, and 42px. Use fullWidth to fill the available space. On native buttons, loading disables interaction and centers a spinner while preserving the button width. Use asChild with a single link for navigation.

Named React children replace primary-action and secondary-actions slots. All actions retain independent tab stops.

Supply items with unique values, labels, and panel content. Use defaultValue for an initial selection, or pair value with onValueChange to control it.

A native button for custom interactive content. Use Link for navigation and className or style for presentation.

Selection uses aria-pressed; removal is a separate sibling button. The parent owns selection and removal state.

A native anchor supports navigation and downloads. Use Button for actions.

Radix provides roving focus, typeahead, disabled items, Escape and focus restoration. Items support groups and links; nested submenus are not exposed.

Five semantic tones communicate status with a visible text label. Badges are not live regions.

Dismissal is local until remounted; use onDismiss to persist it. Critical banners use alert, other tones use status. React action replaces the secondary-actions slot.

React action and graphic props replace named slots. It never fabricates content or a successful network action.

Native progress, max defaults to 100, values are clamped. Missing value is indeterminate with a static striped fallback; it does not animate. The indicator uses the brand token rather than per-instance status tones.

A named status region announces loading. CSS rotation stops under reduced motion, while the status label remains available.

Supports controlled/uncontrolled checked state and the native indeterminate property. Required and validation are native browser behavior.

Uses fieldset/legend and native radio or checkbox inputs. Values are arrays in both modes. Rich secondary option content is not exposed; option labels are strings.

Six-digit RGB hex only. Alpha, HSL and wide-gamut formats are deliberately excluded. A custom picker opens from the swatch beside the editable hex value.

Uses six-digit RGB hex. Drag in the color square or use the keyboard sliders to adjust saturation, brightness, and hue.

The calendar button opens DatePicker. The input retains ISO string values, min/max, required, and readOnly.

React DayPicker supports single/range selection, one/two months, localized labels, month navigation and disabled matchers. Values are Date objects.

Files remain local and are passed to onFilesChange. Type, count and maximum bytes are checked on both chooser and drop paths. No upload service, directory traversal or content scanning. Applications must submit callback files for drag-and-drop; native file FormData covers chooser selections only.

Native type=email and autocomplete=email replace custom input handling. Application errors are supplied through error; browser constraints validate on form submission.

Currency symbol and code use Intl.NumberFormat; input remains an ungrouped decimal string for predictable editing. This is not financial arithmetic, exchange conversion or locale-specific currency parsing.

Native type=number exposes min/max/step and browser steppers. Values emitted by onValueChange remain strings so empty input is representable.

A named, pressed-state visibility toggle preserves focus and value. No password strength scoring or authentication service is included.

Native type=search with a decorative icon. Filtering is application-owned, as shown in the live example.

Single-select options can include descriptions. The selected option shows a checkmark. Multiple selection and listbox sizing use the native control.

A native checkbox with role=switch provides Space activation, form participation and checked state. Its visible label describes the setting, not the current state.

Native textarea with rows, min/maxLength and vertical resizing. Character counting is an application composition, shown in the example.

Native input attributes with label, description, error, prefix, suffix and onValueChange. Compose accessory actions using React nodes.

Native type=url handles validation and input keyboard. It does not prepend a scheme or rewrite input silently.

Semantic tokens control padding, surface, border and radius. Use className or style for additional layout.

Native hr is horizontal by default; vertical mode is intended for flex layouts and has the matching aria-orientation.

Responsive auto-fit columns replace GridItem elements and responsive DSL strings. Children can use CSS gridColumn/gridRow. minColumnWidth prevents squeezed content.

Native ol/li semantics. ListItem is exported for both list components. Native ordered-list attributes such as start and reversed pass through.

An outer div avoids injecting a second main landmark inside host applications. Provide the main landmark in your app. Heading is h1; React nodes replace named content areas.

Native CSS container-type:inline-size and container-name. Write standard @container rules in the consuming application.

Native section is named by its heading. Default heading level is h2; nested semantic structures can be authored using Box and Heading.

Flex direction, gap, align, justify and wrapping replace the layout-specific syntax. Semantic HTML belongs in children; the wrapper is a neutral div.

Generic typed columns, client sorting and controlled selection. Pagination is callback-driven. Tables scroll horizontally on small screens. Virtualization and editable spreadsheet cells are not included.

Native ul/li and standard list semantics; use ListItem or plain li children.

Name supplies accessible text and derived initials. Failed images fall back to initials. No remote avatar service or fabricated profile photographs.

A curated Lucide name map with a source prop for custom Lucide icons. Decorative icons are hidden; meaningful icons require a label.

Native img supports srcSet, sizes, loading and error handlers. Applications own image assets and fallback policy.

Native image with small/medium/large dimensions. Alternative text is required. Source failures use native behavior unless an onError handler is provided.

Radix Dialog handles focus, Escape, background inertness and scroll lock. Controlled open/onOpenChange replaces imperative show/hide methods. Title and description are required.

Radix handles anchoring, collision avoidance, Escape and focus return. It is nonmodal; use Modal for tasks that must block background interaction.

The onRemove callback is parent-owned. Removal has a separately named button. Colors use the shared semantic tones.

Explicit level and visual size are independent. No automatic hierarchy inference, accessibilityRole override or line clamping.

Intl.NumberFormat adds locale/currency/percent formatting beyond tabular styling. Numeric formatting is presentation, not decimal arithmetic.

Native p accepts inline React content and semantic tone. Clamping and numeric variants can be expressed in application CSS.

Native span with size, weight and semantic tone. Use strong/em/code directly for semantic emphasis rather than visual-only text variants.

Radix opens immediately on keyboard focus and after 800ms hover. Tooltip content is plain text, dismisses on Escape, and should never contain required instructions or interactive controls.