Introduction
Radix Primitives and React Aria Components provide unstyled, accessible building blocks for React applications. Both handle interaction details such as keyboard navigation and screen reader support while leaving visual design to you.
This comparison focuses on Radix Primitives and the react-aria-components package. Radix Themes and React Spectrum are separate libraries and are outside its scope. React Aria hooks are identified explicitly where a component equivalent is unavailable.
Last reviewed: October 24, 2026. Release labels reflect the documentation on that date.
Radix UI
Radix Primitives provides composable components for patterns such as dialogs, menus, popovers, and tooltips. Components are split into parts so you can choose their structure and appearance.
The primitives are unstyled and compatible with different styling solutions. Radix Themes is a separate styled component library; its components, such as Button, should not be counted as Primitives exports.
The Primitives catalog also includes preview components. Their availability and release status are listed separately below.
React Aria Components
React Aria Components covers interaction patterns as well as collections, date and time inputs, color controls, and form fields. Its composable parts let you reuse elements across different patterns.
It does not include styles by default. The styled examples in the documentation demonstrate customization; they are not default themes bundled with the component package.
React Aria also exposes a lower-level hooks API. Hooks return behavior and DOM props for your own elements. A hook can help you build an interaction, but it is a different starting point from a composed component.
Comparison
The table compares documented components and equivalent patterns. Names in parentheses identify a different API name or a composition of parts, rather than an identical implementation.
- ✅ = a component or documented component composition is available. Preview, alpha, and release candidate (rc) labels indicate release status.
- ⚠️ = a lower-level hook is available, with additional implementation required.
- ❌ = no dedicated equivalent is documented in the compared library. This does not mean the behavior cannot be built with native elements or other components.
| Component | Radix Primitives | React Aria Components |
|---|---|---|
| Accordion | ✅ | ✅ (DisclosureGroup) |
| Alert Dialog | ✅ | ✅ (Dialog with role="alertdialog") |
| Aspect Ratio | ✅ | ❌ |
| Avatar | ✅ | ❌ |
| Checkbox | ✅ | ✅ |
| Collapsible | ✅ | ✅ (Disclosure) |
| Context Menu | ✅ | ⚠️ (useContextMenu hook only) |
| Dialog | ✅ | ✅ (Dialog + Modal for modal behavior) |
| Dropdown Menu | ✅ | ✅ (Menu + MenuTrigger) |
| Form | ✅ (preview) | ✅ |
| Hover Card | ✅ | ✅ (PreviewTrigger + Popover) |
| Label | ✅ | ✅ |
| Menubar | ✅ | ❌ |
| Navigation Menu | ✅ | ❌ |
| One-Time Password Field | ✅ (preview) | ❌ |
| Password Toggle Field | ✅ (preview) | ❌ |
| Popover | ✅ | ✅ |
| Progress | ✅ | ✅ (ProgressBar) |
| Radio Group | ✅ | ✅ |
| Scroll Area | ✅ | ❌ |
| Select | ✅ | ✅ |
| Separator | ✅ | ✅ (Separator) |
| Slider | ✅ | ✅ |
| Switch | ✅ | ✅ |
| Tabs | ✅ | ✅ |
| Toast | ✅ | ✅ (alpha) |
| Toggle | ✅ | ✅ (ToggleButton) |
| Toggle Group | ✅ | ✅ (ToggleButtonGroup) |
| Toolbar | ✅ | ✅ |
| Tooltip | ✅ | ✅ |
| Autocomplete | ❌ | ✅ (rc) |
| Button | ❌ | ✅ |
| File Trigger | ❌ | ✅ |
| Grid List | ❌ | ✅ |
| Group | ❌ | ✅ |
| List Box | ❌ | ✅ |
| Table | ❌ | ✅ |
| Tag Group | ❌ | ✅ |
| Tree | ❌ | ✅ |
| Navigation Tree | ❌ | ✅ (alpha) |
| Color Area | ❌ | ✅ |
| Color Field | ❌ | ✅ |
| Color Picker | ❌ | ✅ |
| Color Slider | ❌ | ✅ |
| Color Swatch | ❌ | ✅ |
| Color Swatch Picker | ❌ | ✅ |
| Color Wheel | ❌ | ✅ |
| Calendar | ❌ | ✅ |
| Date Field | ❌ | ✅ |
| Date Picker | ❌ | ✅ |
| Date Range Picker | ❌ | ✅ |
| Range Calendar | ❌ | ✅ |
| Time Field | ❌ | ✅ |
| Drop Zone | ❌ | ✅ (DropZone) |
| Checkbox Group | ❌ | ✅ |
| Number Field | ❌ | ✅ |
| Search Field | ❌ | ✅ |
| Text Field | ❌ | ✅ |
| Breadcrumbs | ❌ | ✅ |
| Disclosure | ✅ (Collapsible) | ✅ |
| Disclosure Group | ✅ (Accordion) | ✅ |
| Link | ❌ | ✅ |
| ComboBox | ❌ | ✅ |
| Meter | ❌ | ✅ |
| Sheet | ❌ | ✅ |
| Token Field | ❌ | ✅ (alpha) |
| Virtualizer | ❌ | ✅ |
Important differences behind the checkmarks
useContextMenu handles context menu events across input methods. It does not provide the complete menu: positioning, open state, and menu rendering still need to be implemented or composed with other building blocks.
PreviewTrigger opens a non-modal popover on hover, focus, or long press, and allows interactive content. It covers the preview pattern associated with a hover card, but its interaction behavior should be evaluated separately from Radix Hover Card.
Separator is a component in its own right. React Aria support is no longer limited to the useSeparator hook.
Dialog supports both dialog and alertdialog roles. React Aria composes modal behavior with Modal and ModalOverlay instead of exporting a separate AlertDialog component.
Disclosure and DisclosureGroup appear under their own names and under the equivalent Collapsible and Accordion patterns. Their Radix equivalents are therefore marked consistently in both places. NavigationTree is a hierarchical navigation pattern; it is listed separately from Navigation Menu.
The release labels for Autocomplete, NavigationTree, TokenField, and Toast matter when evaluating production requirements. A checkmark records availability, not a promise that every API has reached a stable release.