Components

Heading, Text, Lead, Code, Blockquote, List and a Prose wrapper for MDX.

Triggers an action, with variants, sizes and a pending state.

A button that can be switched on or off.

A set of toggle buttons with single or multiple selection.

Groups of buttons and toggles with arrow-key navigation and one tab stop.

Form with live validation, server errors, sections, rows and an actions bar.

Single-line text input with label, description and validation.

Multi-line text input that grows with its content.

Numeric input with steppers, locale formatting and bounds.

Text input for search with a clear button.

Pick one option from a collapsible list.

Text input with a filterable list of suggestions.

Checkbox and CheckboxGroup, with indeterminate state.

Choose a single option from a set.

Toggle a setting on or off.

Pick a value or range by dragging a thumb.

One-time password input with individual character slots.

Color area, sliders, swatches, hex field and a popover picker.

Drag-and-drop target with a FileTrigger for browsing files.

Star rating input with keyboard support, and a read-only display with half stars.

Attach text, icons and buttons to an input as one focusable field.

Calendar and RangeCalendar for picking dates.

Segmented DateField and TimeField inputs.

DatePicker and DateRangePicker with a calendar popover.

Modal dialog and alert dialog.

A dialog that slides in from an edge of the screen.

Floating content anchored to a trigger.

A short label shown on hover or focus.

Dropdown menu with sections, selection, shortcuts and submenus.

Keyboard-driven command menu that filters as you type.

Switch between panels of related content.

Show the current page's location in a hierarchy.

Accessible link with style variants.

Navigate between pages of results.

Collapsible sections and accordions.

Collapsible app sidebar with icon mode, mobile sheet and a keyboard shortcut.

Steps of a multi-step flow, horizontal or vertical, with status and optional navigation.

A selectable list of options, with sections.

An interactive list with selection and actions.

Data table with sorting and row selection.

Expandable hierarchy with icons, selection and keyboard navigation.

Selectable, removable tags.

Container with header, content and footer.

Small status or count label.

User image with fallback initials, sizes and groups.

Visually or semantically separates content.

List row with media, a title, a quiet second line and actions.

Display keyboard keys and shortcuts.

Recharts wrapper with themed colors, tooltip and legend.

Swipeable slides built on Embla.

A vertical feed of events with dots or icons, times and connector lines.

Term and value pairs for detail pages, side by side or stacked.

Empty state with media, a title, a description and actions.

Native scrolling with thin, themed scrollbars and optional fade edges.

Callout for important messages.

Shows progress of a task, determinate or not.

Shows a value within a known range, like storage used.

Placeholder while content loads, with pulse or shimmer animation.

Loading indicator.

Stacked notifications powered by sonner.

Circular progress, determinate or indeterminate, with the value inside.