Craft world-class accessible components with custom styles.

Over 40 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.

https://your-app.com
AgapanthusAgapanthus praecox
full sun Minimum
AloeAloe vera
full sun Minimum
Blue JacarandaJacaranda mimosifolia
full sun Minimum
Chinese Money PlantPilea peperomioides
part sun Average
Christmas BushCeratopetalum gummiferum
full sun Average
Delta Maidenhair FernAdiantum raddianum
part shade Average
Fiddle Leaf FigFicus lyrata
full sun Average
GardeniaGardenia jasminoides
part sun Average
IvyHedera
part sun Frequent
Morning GloryIpomoea
full sun Frequent
NasturtiumTropaeolum
full sun Average
OleanderNerium oleander
full sun Minimum
PoplarPopulus
full sun Average
Spider PlantChlorophytum comosum
part sun Average
Split-leaf PhilodendronMonstera deliciosa
part shade Frequent
Star JasmineTrachelospermum jasminoides
full sun Frequent
Striped DracaenaAsparagaceae
part sun Average
Tree FernCyatheaceae
part sun Frequent
Tuberous Sword FernNephrolepis cordifolia
part shade Frequent
Zanzibar GemZamioculcas
part sun Average

Bring your own styles.

React Aria is style-free out of the box, allowing you to build custom designs to fit your application or design system using any styling and animation solution. Each component is broken down into individual parts with built-in states, render props, and slots that make styling a breeze.

Learn more
DatePicker.tsx
<DatePicker>
  <Label>Date Planted</Label>
  <Group>
    <DateInput>
      {segment => <DateSegment segment={segment} />}
    </DateInput>
    <Button><CalendarIcon /></Button>
  </Group>
  <Popover>
    <Dialog>
      <Calendar>
        <Button slot="previous"><LeftIcon /></Button>
        <Heading />
        <Button slot="next"><RightIcon /></Button>
        <CalendarGrid>
          {date => <CalendarCell date={date} />}
        </CalendarGrid>
      </Calendar>
    </Dialog>
  </Popover>
</DatePicker>
DatePicker.css
/* Consistent default classes for each component */
.react-aria-DatePicker {
  /* ... */

  .react-aria-Group {
    border: 2px solid var(--gray-300);
  }
}

.react-aria-CalendarCell {
  color: var(--gray-900);

  /* Style interactive states with data attributes */
  &[data-pressed] {
    background: var(--gray-100);
  }

  &[data-selected] {
    color: var(--gray-50);
    background: var(--blue-600);
  }
}
/* Consistent default classes for each component */
.react-aria-DatePicker {
  /* ... */

  .react-aria-Group {
    border: 2px solid var(--gray-300);
  }
}

.react-aria-CalendarCell {
  color: var(--gray-900);

  /* Style interactive states with data attributes */
  &[data-pressed] {
    background: var(--gray-100);
  }

  &[data-selected] {
    color: var(--gray-50);
    background: var(--blue-600);
  }
}
/* Consistent default classes for each component */
.react-aria-DatePicker {
  /* ... */

  .react-aria-Group {
    border: 2px solid var(--gray-300);
  }
}

.react-aria-CalendarCell {
  color: var(--gray-900);

  /* Style interactive states with data attributes */
  &[data-pressed] {
    background: var(--gray-100);
  }

  &[data-selected] {
    color: var(--gray-50);
    background: var(--blue-600);
  }
}
https://your-app.com
Date Planted
ComboBox.tsx
<ComboBox className="group flex ...">
  <Label>Assignee</Label>
  {/* Tailwind plugin for all UI states. */}
  <Group className="... focus-visible:outline-blue-600">
    <Input className="flex-1 ..." />
    <Button className="... pressed:bg-gray-100">
      <ChevronsUpDownIcon />
    </Button>
  </Group>
  {/* Built-in entry and exit animation states. */}
  <Popover className="w-[--trigger-width] ... entering:animate-in entering:fade-in exiting:animate-out exiting:fade-out">
    <ListBox items={people}>
      {item => (
        <ListBoxItem textValue={item.name} className="group text-gray-900 ... focus:bg-blue-600 focus:text-white">
          {/* Use render props to customize children based on state. */}
          {({ isSelected }) => <>
            <img alt="" src={item.avatar} />
            <span className="... font-normal group-selected:font-semibold">{item.name}</span>
            {isSelected &&
              <CheckIcon />
            }
          </>}
        </ListBoxItem>
      )}
    </ListBox>
  </Popover>
</ComboBox>
https://your-app.com
Slider.tsx
const StyledSlider = styled(Slider)`
  display: grid;
  /* ... */
`;

const StyledSliderTrack = styled(SliderTrack)`
  background: var(--gray-300);
`;

const StyledSliderThumb = styled(SliderThumb)`
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gray-50);
  border: 2px solid var(--gray-600);

  &[data-dragging] {
    background: var(--gray-600);
  }
`;

<StyledSlider defaultValue={30}>
  <Label>Opacity</Label>
  <SliderOutput />
  <StyledSliderTrack>
    <StyledSliderThumb />
  </StyledSliderTrack>
</StyledSlider>
https://your-app.com
30
Button.tsx
import {Button} from 'react-aria-components';
import {styled} from '../styled-system/jsx';

const StyledButton = styled(Button, {
  base: {
    /* ... */
  },
  variants: {
    variant: {
      primary: {
        background: 'blue.600',
        '&[data-pressed]': {
          background: 'blue.700',
        }
      },
      secondary: {
        background: 'gray.300',
        '&[data-pressed]': {
          background: 'gray.400',
        }
      }
    }
  }
});

<StyledButton variant="primary">
  Initiate launch sequence…
</StyledButton>
https://your-app.com

Advanced features for ambitious apps.

Make your web app feel native with rich interactions that adapt to the device, platform, and user. React Aria supports advanced features like accessible drag and drop, keyboard multi-selection, built-in form validation, table column resizing, and a ton more.

Learn more

Open

7 tasks
UI Button Alignment Issue#101Buttons in the Settings menu are misaligned on smaller screens.Gilberto Miguel
Login Page Redesign#102Requesting a redesign of the login page to improve user experience.Maia Pettegree
Feature: Dark Mode#104Implement a dark mode option for improved accessibility and user preference.Sarah Lee
Missing User Profile Pictures#105Some user profile pictures are not displaying properly in the user dashboard.David Chen
Broken Link on Homepage#107The "Learn More" link on the homepage is leading to a 404 error.Alex Turner
Feature: Export to PDF#108Implement a feature to allow users to export their data to PDF format.Maia Pettegree
Mobile Responsiveness Issue#109The application is not rendering properly on certain mobile devices.Kevin Williams

In Progress

2 tasks
Database Connection Error#103Users are experiencing intermittent connection errors when accessing the database.Mike Johnson
Feature: Two-Factor Authentication#110Requesting the addition of two-factor authentication for improved security.Maia Pettegree

Closed

1 task
Performance Optimization#106Requesting performance optimization for the application to reduce load times.Sarah Lee

High quality interactions on all devices.

React Aria ensures a great experience for users, no matter their device. All components are optimized for mouse, touch, keyboard, and screen reader interactions, with a meticulous attention to detail that makes your app feel responsive and natural on every platform.

Learn more

Accessibility that's truly first-class.

React Aria is designed with accessibility as a top priority, and battle tested in production applications. All components are built to work across a wide variety of devices and assistive technologies to ensure the best experience possible for all users.

Learn more
4:36 AM
Permissions

ARIA Semantics.

Components implement semantics and keyboard behavior according to the W3C ARIA Authoring Practices Guide. React Aria builds on this foundation with real-world testing and device support.

Mobile ready.

All behaviors work without a keyboard, ensuring touch screen reader users have full access. Additional features such as hidden dismiss buttons in dialogs enable a great experience for mobile users.

Tested. Like, really.

All components are extensively tested using many popular screen readers and devices. React Aria normalizes differing behavior between browsers and assistive technologies to ensure all users have equal access.

Ready for an international audience.

React Aria is engineered for internationalization out of the box, including translations in over 30 languages, localized date and number formatting and parsing, support for 13 calendar systems, 5 numbering systems, right-to-left layout, and more.

Learn more
Locale
Calendar
Numbering System
Number Format

February 2025

26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
Date and Time
2
22
2025
4
36
AM
UTC

Customizable to the max.

React Aria offers a flexible and scalable API that lets you dive as deep into the details as you like. Start with high-level components with a built-in DOM structure and simple styling API, compose custom patterns with contexts, and for the ultimate control, drop down to the low-level Hook-based API. Mix and match as needed.

Learn more

Ready to get started?