All Components (React)

Group related buttons together with consistent styling and spacing

A clickable button component with multiple variants and states

Button component for closing dialogs, modals, or dismissing content

Groups multiple ToggleButtons into a unified control, allowing users to select one or multiple options.

An interactive toggle control for on/off or selected/unselected states

A dropdown displays a list of actions or options that a user can choose

A listbox displays a list of options and allows a user to select one or more of them

A focusable list of tags with support for keyboard navigation, selection, and removal

A 2D color picker that allows users to select colors from a gradient area

Color input field with labels, descriptions, and validation built on React Aria ColorField

A composable color picker that synchronizes color value between multiple color components

A color slider allows users to adjust an individual channel of a color value

A list of color swatches that allows users to select a color from a predefined palette.

A visual preview of a color value with accessibility support

A slider allows a user to select one or more values within a range

A toggle switch component for boolean states

Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels

Small informational badges for displaying labels, statuses, and categories

Tables display structured data in rows and columns with support for sorting, selection, column resizing, and infinite scrolling.

Composable date picker with month grid, navigation, and year picker support built on React Aria Calendar

Date input field with labels, descriptions, and validation built on React Aria DateField

Composable date picker built on React Aria DatePicker with DateField and Calendar composition

Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition

Composable date range picker with month grid, navigation, and year picker support built on React Aria RangeCalendar

Time input field with labels, descriptions, and validation built on React Aria TimeField

Display important messages and notifications to users with status indicators

A meter represents a quantity within a known range, or a fractional value.

A progress bar shows either determinate or indeterminate progress of an operation over time.

A circular progress indicator that shows determinate or indeterminate progress.

Skeleton is a placeholder to show a loading state and the expected shape of a component.

A loading indicator component to show pending states

A checkbox group component for managing multiple checkbox selections

Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

Provides supplementary text for form fields and other components

A low-level error message component for displaying errors

Displays validation error messages for form fields

Group related form controls with legends, descriptions, and actions

Wrapper component for form validation and submission handling

Group related input controls with prefix and suffix elements for enhanced form fields

A one-time password input component for verification codes and secure authentication

Primitive single-line text input component that accepts standard HTML attributes

Renders an accessible label associated with form controls

Number input fields with increment/decrement buttons, validation, and internationalized formatting

Radio group for selecting a single option from a list

Search input field with clear button and search icon

Primitive multiline text input component that accepts standard HTML attributes

Composition-friendly text fields with labels, descriptions, and inline validation

Flexible container component for grouping related content and actions

Visually divide content sections

Container component that provides surface-level styling and context for child components

A container for interactive controls with arrow key navigation.

Display a stacked or grid group of avatars with overflow counting

Display user profile images with customizable fallback content

A collapsible content panel for organizing information in a compact space

Navigation breadcrumbs showing the current page's location within a hierarchy

Container that manages multiple Disclosure items with coordinated expanded states

A disclosure is a collapsible section with a header containing a heading and a trigger button, and a panel that wraps the content.

A styled anchor component for navigation with built-in icon support

Page navigation with composable page links, previous/next buttons, and ellipsis indicators

Tabs organize content into multiple sections and allow users to navigate between them.

Modal dialog for critical confirmations requiring user attention and explicit action

Slide-out panel for supplementary content and actions

Dialog overlay for focused user interactions and important content

Displays rich content in a portal triggered by a button or any custom element

Display temporary notifications and messages to users with automatic dismissal and customizable placement

Displays informative text when users hover over or focus on an element

An autocomplete combines a select with filtering, allowing users to search and select from a list of options

A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query

A select displays a collapsible list of options and allows a user to select one of them

Display keyboard shortcuts and key combinations

A semantic typography primitive for headings, body copy, and inline code built on React Aria Components Text.

Apply visual shadows to indicate scrollable content overflow with automatic detection of scroll position.