React Aria Components

React Aria Components is a library of unstyled, accessible UI components that you can style with any CSS solution. Built on top of React Aria hooks, it provides the accessibility and behavior without prescribing any visual design.

Documentation Structure

The references/ directory contains detailed documentation organized as follows:

Guides

• Collections: Many components display a collection of items, and provide functionality such as keyboard navigation
• Customization: React Aria is built using a flexible and composable API. Learn how to use contexts and slots to crea
• Drag and Drop: React Aria collection components support drag and drop with mouse and touch interactions, and full k
• Forms: Learn how to integrate with HTML forms, validate and submit data, and use React Aria with form libra
• Framework setup: Learn how to integrate React Aria with your framework.
• Getting started: How to install React Aria and build your first component.
• MCP Server: Learn how to use the React Aria server to help AI agents browse the documentation.
• Quality: React Aria is built around three core principles: , , and . Learn how to apply these tools to build
• Selection: Many collection components support selecting items by clicking or tapping them, or by using the keyb
• Styling: React Aria does not include any styles by default. Learn how to build custom designs to fit your app

Components

• Autocomplete: An autocomplete allows users to search or filter a list of suggestions.
• Breadcrumbs: Breadcrumbs display a hierarchy of links to the current page or resource in an a
• Button: A button allows a user to perform an action, with mouse, touch, and keyboard int
• Calendar: A calendar displays one or more date grids and allows users to select a single d
• Checkbox: A checkbox allows a user to select multiple items from a list of individual item
• CheckboxGroup: A CheckboxGroup allows users to select one or more items from a list of choices.
• ColorArea: A color area allows users to adjust two channels of an RGB, HSL or HSB color val
• ColorField: A color field allows users to edit a hex color or individual color channel value
• ColorPicker: A ColorPicker synchronizes a color value between multiple React Aria color compo
• ColorSlider: A color slider allows users to adjust an individual channel of a color value.
• ColorSwatch: A ColorSwatch displays a preview of a selected color.
• ColorSwatchPicker: A ColorSwatchPicker displays a list of color swatches and allows a user to selec
• ColorWheel: A color wheel allows users to adjust the hue of an HSL or HSB color value on a c
• ComboBox: A combo box combines a text input with a listbox, allowing users to filter a lis
• DateField: A date field allows users to enter and edit date and time values using a keyboar
• …and 36 more components in references/components/

Interactions

• FocusRing: A utility component that applies a CSS class when an element has keyboard focus.
• FocusScope: A FocusScope manages focus for its descendants. It supports containing focus ins
• useClipboard: Handles clipboard interactions for a focusable element. Supports items of multip
• useDrag: Handles drag interactions for an element, with support for traditional mouse and
• useDrop: Handles drop interactions for an element, with support for traditional mouse and
• useFocus: Handles focus events for the immediate target.
• useFocusRing: Determines whether a focus ring should be shown to indicate keyboard focus.
• useFocusVisible: Manages focus visible state for the page, and subscribes individual components f
• useFocusWithin: Handles focus events for the target and its descendants.
• useHover: Handles pointer hover interactions for an element. Normalizes behavior
• …and 5 more in references/interactions/

Utilities

• I18nProvider: Provides the locale for the application to all child components.
• mergeProps: Merges multiple props objects together. Event handlers are chained,
• PortalProvider: Sets the portal container for all overlay elements rendered by its children.
• SSRProvider: When using SSR with React Aria in React 16 or 17, applications must be wrapped i
• useCollator: Provides localized string collation for the current locale. Automatically update
• useDateFormatter: Provides localized date formatting for the current locale. Automatically updates
• useField: Provides the accessibility implementation for input fields.
• useFilter: Provides localized string search functionality that is useful for filtering or m
• useId: If a default is not provided, generate an id.
• useIsSSR: Returns whether the component is currently being server side rendered or
• …and 5 more in references/utilities/

Internationalization

• Calendar
• CalendarDate
• CalendarDateTime
• DateFormatter
• Internationalized Date
• Internationalized Number
• NumberFormatter
• NumberParser
• Time
• ZonedDateTime

Testing

• Testing CheckboxGroup
• Testing ComboBox
• Testing GridList
• Testing ListBox
• Testing Menu