Examples
Techniques for styling and animating React Aria Components, and integrating with other libraries.

Account Menu
A Menu with an interactive header, built with a Dialog and Popover.

Action Menu
An animated menu of actions, styled with Tailwind CSS.

Category Tabs
An article category tabs component styled with Tailwind CSS.

Contact List
A ListBox featuring sticky section headers and multiple selection.

DatePicker
A DatePicker component styled with Tailwind CSS.

Destructive Alert Dialog
An animated confirmation dialog, styled with Tailwind CSS.

Gesture Driven Modal Sheet
An iOS-style gesture driven modal sheet built with Framer Motion.

Image Grid
An async image gallery with selectable items, styled with Tailwind CSS.

iOS List View
A GridList with swipe gestures, layout animations, and multi selection.

Loading ProgressBar
A loading ProgressBar styled with Tailwind CSS.

Notifications Popover
A notifications popover styled with Tailwind CSS.

Opacity Slider
An opacity slider styled with Tailwind CSS.

Ripple Button
A button with an animated ripple effect styled with Tailwind CSS.

Shipping Radio Group
A shipping options RadioGroup styled with Tailwind CSS.

Status Select
An issue status dropdown styled with Tailwind CSS.

Stock Table
A table with sticky headers, sorting, multiple selection, and column resizing.

Swipeable Tabs
A swipeable Tabs component built with Framer Motion and CSS scroll snapping.

User Search ComboBox
A user search ComboBox styled with Tailwind CSS.

Wi-Fi Switch
An animated Wi-Fi Switch styled with Tailwind CSS.