Craft world-class accessible components with custom styles.

<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>

/* 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);
  }
}

<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>

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>

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>