---
name: "@react-aria"
slug: "react-aria"
description: "Adobe's React Aria is a comprehensive, style-free accessibility-first component library (50+ components) distributed via a shadcn-compatible registry with Tailwind CSS and Vanilla CSS examples. Components include DatePicker, Calendar, Table, SearchField, Modal, Combobox, Select, Checkbox, ToggleButton, Menu, Popover, Tooltip, and more, all with built-in WAI-ARIA behavior, adaptive interactions, and i18n/internationalization support. Backed by Adobe with strong long-term maintenance. Fully free and open-source. Use for: projects requiring top-tier accessibility, date/time pickers, or internationalization where you bring your own styling system and need battle-tested behavioral primitives."
category: "Component library (general)"
tags: ["accessibility", "buttons", "cards", "components", "design-system", "forms", "hooks", "loaders", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: "Apache-2.0"
author: "adobe"
website: "https://react-aria.adobe.com"
github: "https://github.com/adobe/react-spectrum"
registry: "https://react-aria.adobe.com/registry/registry.json"
pro: false
pro_url: null
github_stars: 15639
component_count: 111
generated_at: "2026-07-28T08:00:50.948Z"
---

# @react-aria

Adobe's React Aria is a comprehensive, style-free accessibility-first component library (50+ components) distributed via a shadcn-compatible registry with Tailwind CSS and Vanilla CSS examples. Components include DatePicker, Calendar, Table, SearchField, Modal, Combobox, Select, Checkbox, ToggleButton, Menu, Popover, Tooltip, and more, all with built-in WAI-ARIA behavior, adaptive interactions, and i18n/internationalization support. Backed by Adobe with strong long-term maintenance. Fully free and open-source. Use for: projects requiring top-tier accessibility, date/time pickers, or internationalization where you bring your own styling system and need battle-tested behavioral primitives.

## Links

- Website: https://react-aria.adobe.com
- GitHub: https://github.com/adobe/react-spectrum
- Registry JSON: https://react-aria.adobe.com/registry/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/react-aria
- This file: https://sh4dcn.vercel.app/md/react-aria.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://react-aria.adobe.com/registry/registry.json
pnpm dlx shadcn@latest add https://react-aria.adobe.com/registry/registry.json
bunx shadcn@latest add https://react-aria.adobe.com/registry/registry.json
# clone the source repo
git clone https://github.com/adobe/react-spectrum.git
# fetch the raw registry index
curl -s https://react-aria.adobe.com/registry/registry.json
```

## Components (111)

| name | type | description | install |
| --- | --- | --- | --- |
| tailwind | registry:style | — | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind.json` |
| tailwind-alertdialog | registry:ui | AlertDialog | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-alertdialog.json` |
| tailwind-breadcrumbs | registry:ui | Breadcrumbs | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-breadcrumbs.json` |
| tailwind-button | registry:ui | Button | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-button.json` |
| tailwind-calendar | registry:ui | Calendar | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-calendar.json` |
| tailwind-checkbox | registry:ui | Checkbox | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-checkbox.json` |
| tailwind-checkboxgroup | registry:ui | CheckboxGroup | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-checkboxgroup.json` |
| tailwind-colorarea | registry:ui | ColorArea | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-colorarea.json` |
| tailwind-colorfield | registry:ui | ColorField | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-colorfield.json` |
| tailwind-colorpicker | registry:ui | ColorPicker | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-colorpicker.json` |
| tailwind-colorslider | registry:ui | ColorSlider | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-colorslider.json` |
| tailwind-colorswatch | registry:ui | ColorSwatch | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-colorswatch.json` |
| tailwind-colorswatchpicker | registry:ui | ColorSwatchPicker | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-colorswatchpicker.json` |
| tailwind-colorthumb | registry:ui | ColorThumb | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-colorthumb.json` |
| tailwind-colorwheel | registry:ui | ColorWheel | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-colorwheel.json` |
| tailwind-combobox | registry:ui | ComboBox | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-combobox.json` |
| tailwind-commandpalette | registry:ui | CommandPalette | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-commandpalette.json` |
| tailwind-datefield | registry:ui | DateField | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-datefield.json` |
| tailwind-datepicker | registry:ui | DatePicker | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-datepicker.json` |
| tailwind-daterangepicker | registry:ui | DateRangePicker | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-daterangepicker.json` |
| tailwind-dialog | registry:ui | Dialog | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-dialog.json` |
| tailwind-disclosure | registry:ui | Disclosure | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-disclosure.json` |
| tailwind-disclosuregroup | registry:ui | DisclosureGroup | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-disclosuregroup.json` |
| tailwind-dropzone | registry:ui | DropZone | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-dropzone.json` |
| tailwind-field | registry:ui | Field | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-field.json` |
| tailwind-fieldbutton | registry:ui | FieldButton | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-fieldbutton.json` |
| tailwind-form | registry:ui | Form | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-form.json` |
| tailwind-gridlist | registry:ui | GridList | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-gridlist.json` |
| tailwind-link | registry:ui | Link | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-link.json` |
| tailwind-listbox | registry:ui | ListBox | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-listbox.json` |
| tailwind-menu | registry:ui | Menu | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-menu.json` |
| tailwind-meter | registry:ui | Meter | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-meter.json` |
| tailwind-modal | registry:ui | Modal | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-modal.json` |
| tailwind-numberfield | registry:ui | NumberField | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-numberfield.json` |
| tailwind-popover | registry:ui | Popover | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-popover.json` |
| tailwind-progressbar | registry:ui | ProgressBar | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-progressbar.json` |
| tailwind-radiogroup | registry:ui | RadioGroup | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-radiogroup.json` |
| tailwind-rangecalendar | registry:ui | RangeCalendar | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-rangecalendar.json` |
| tailwind-searchfield | registry:ui | SearchField | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-searchfield.json` |
| tailwind-select | registry:ui | Select | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-select.json` |
| tailwind-separator | registry:ui | Separator | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-separator.json` |
| tailwind-slider | registry:ui | Slider | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-slider.json` |
| tailwind-switch | registry:ui | Switch | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-switch.json` |
| tailwind-table | registry:ui | Table | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-table.json` |
| tailwind-tabs | registry:ui | Tabs | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-tabs.json` |
| tailwind-taggroup | registry:ui | TagGroup | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-taggroup.json` |
| tailwind-textfield | registry:ui | TextField | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-textfield.json` |
| tailwind-timefield | registry:ui | TimeField | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-timefield.json` |
| tailwind-toast | registry:ui | Toast | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-toast.json` |
| tailwind-togglebutton | registry:ui | ToggleButton | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-togglebutton.json` |
| tailwind-togglebuttongroup | registry:ui | ToggleButtonGroup | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-togglebuttongroup.json` |
| tailwind-toolbar | registry:ui | Toolbar | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-toolbar.json` |
| tailwind-tooltip | registry:ui | Tooltip | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-tooltip.json` |
| tailwind-tree | registry:ui | Tree | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-tree.json` |
| tailwind-utils | registry:lib | utils | `npx shadcn@latest add https://react-aria.adobe.com/registry/tailwind-utils.json` |
| css | registry:style | — | `npx shadcn@latest add https://react-aria.adobe.com/registry/css.json` |
| css-breadcrumbs | registry:ui | Breadcrumbs | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-breadcrumbs.json` |
| css-button | registry:ui | Button | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-button.json` |
| css-calendar | registry:ui | Calendar | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-calendar.json` |
| css-checkbox | registry:ui | Checkbox | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-checkbox.json` |
| css-checkboxgroup | registry:ui | CheckboxGroup | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-checkboxgroup.json` |
| css-colorarea | registry:ui | ColorArea | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-colorarea.json` |
| css-colorfield | registry:ui | ColorField | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-colorfield.json` |
| css-colorpicker | registry:ui | ColorPicker | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-colorpicker.json` |
| css-colorslider | registry:ui | ColorSlider | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-colorslider.json` |
| css-colorswatch | registry:ui | ColorSwatch | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-colorswatch.json` |
| css-colorswatchpicker | registry:ui | ColorSwatchPicker | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-colorswatchpicker.json` |
| css-colorthumb | registry:ui | ColorThumb | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-colorthumb.json` |
| css-colorwheel | registry:ui | ColorWheel | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-colorwheel.json` |
| css-combobox | registry:ui | ComboBox | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-combobox.json` |
| css-commandpalette | registry:ui | CommandPalette | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-commandpalette.json` |
| css-content | registry:ui | Content | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-content.json` |
| css-datefield | registry:ui | DateField | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-datefield.json` |
| css-datepicker | registry:ui | DatePicker | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-datepicker.json` |
| css-daterangepicker | registry:ui | DateRangePicker | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-daterangepicker.json` |
| css-dialog | registry:ui | Dialog | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-dialog.json` |
| css-disclosure | registry:ui | Disclosure | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-disclosure.json` |
| css-disclosuregroup | registry:ui | DisclosureGroup | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-disclosuregroup.json` |
| css-dropzone | registry:ui | DropZone | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-dropzone.json` |
| css-form | registry:ui | Form | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-form.json` |
| css-gridlist | registry:ui | GridList | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-gridlist.json` |
| css-inputgroup | registry:ui | InputGroup | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-inputgroup.json` |
| css-link | registry:ui | Link | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-link.json` |
| css-listbox | registry:ui | ListBox | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-listbox.json` |
| css-menu | registry:ui | Menu | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-menu.json` |
| css-meter | registry:ui | Meter | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-meter.json` |
| css-modal | registry:ui | Modal | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-modal.json` |
| css-numberfield | registry:ui | NumberField | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-numberfield.json` |
| css-popover | registry:ui | Popover | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-popover.json` |
| css-progressbar | registry:ui | ProgressBar | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-progressbar.json` |
| css-progresscircle | registry:ui | ProgressCircle | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-progresscircle.json` |
| css-radiogroup | registry:ui | RadioGroup | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-radiogroup.json` |
| css-rangecalendar | registry:ui | RangeCalendar | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-rangecalendar.json` |
| css-searchfield | registry:ui | SearchField | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-searchfield.json` |
| css-segmentedcontrol | registry:ui | SegmentedControl | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-segmentedcontrol.json` |
| css-select | registry:ui | Select | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-select.json` |
| css-separator | registry:ui | Separator | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-separator.json` |
| css-sheet | registry:ui | Sheet | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-sheet.json` |
| css-slider | registry:ui | Slider | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-slider.json` |
| css-switch | registry:ui | Switch | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-switch.json` |
| css-table | registry:ui | Table | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-table.json` |
| css-tabs | registry:ui | Tabs | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-tabs.json` |
| css-taggroup | registry:ui | TagGroup | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-taggroup.json` |
| css-textfield | registry:ui | TextField | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-textfield.json` |
| css-timefield | registry:ui | TimeField | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-timefield.json` |
| css-toast | registry:ui | Toast | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-toast.json` |
| css-togglebutton | registry:ui | ToggleButton | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-togglebutton.json` |
| css-togglebuttongroup | registry:ui | ToggleButtonGroup | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-togglebuttongroup.json` |
| css-toolbar | registry:ui | Toolbar | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-toolbar.json` |
| css-tooltip | registry:ui | Tooltip | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-tooltip.json` |
| css-tree | registry:ui | Tree | `npx shadcn@latest add https://react-aria.adobe.com/registry/css-tree.json` |

## For AI agents

```text
You are adding components from @react-aria to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/react-aria.md) for the component list.
2. Fetch the machine-readable index: https://react-aria.adobe.com/registry/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: react-aria).
```