All just CSS transitions – no additional animation libraries needed! We give you data-entering and data-exiting states for each TabPanel, and a CSS variable for the height that you can transition.
![.react-aria-TabPanels {
position: relative;
height: var(--tab-panel-height);
transition: height 400ms;
overflow: clip;
}
.react-aria-TabPanel {
transition: opacity 400ms;
&[data-entering],
&[data-exiting] {
opacity: 0;
}
&[data-exiting] {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:6sxf5ndtba4gsh3kp6hrt5g4/bafkreidk6xms7gg33mvy5ac2bnqb7up32uc2qp7viy5rvsfpdmz2fbktnm@jpeg)
October 23, 2025 at 6:12 PM
All just CSS transitions – no additional animation libraries needed! We give you data-entering and data-exiting states for each TabPanel, and a CSS variable for the height that you can transition.
In the next release of React Aria, tab panels support entry and exit animations (e.g. cross fade), as well as smooth height transitions. 🎉
October 23, 2025 at 5:14 PM
In the next release of React Aria, tab panels support entry and exit animations (e.g. cross fade), as well as smooth height transitions. 🎉
The current month is centered in the viewport, with an extra month + large placeholder on either side. As you swipe, the months update and the placeholder shrinks. When scrolling ends, the scroll position is re-centered. This avoids jumpiness when updating the scroll position while the user scrolls.
October 20, 2025 at 5:24 PM
The current month is centered in the viewport, with an extra month + large placeholder on either side. As you swipe, the months update and the placeholder shrinks. When scrolling ends, the scroll position is re-centered. This avoids jumpiness when updating the scroll position while the user scrolls.
Built a React Aria Calendar with swipe gestures to navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇
stackblitz.com/edit/rac-swi...
stackblitz.com/edit/rac-swi...
October 20, 2025 at 5:24 PM
Built a React Aria Calendar with swipe gestures to navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇
stackblitz.com/edit/rac-swi...
stackblitz.com/edit/rac-swi...
Thanks! It animates too. 😉
October 14, 2025 at 10:50 PM
Thanks! It animates too. 😉
All of the colors are calculated based on a single CSS variable using relative oklch, so you can change the theme with just one line.
--tint: green;
Modern CSS is amazing! 😲
--tint: green;
Modern CSS is amazing! 😲
October 14, 2025 at 10:49 PM
All of the colors are calculated based on a single CSS variable using relative oklch, so you can change the theme with just one line.
--tint: green;
Modern CSS is amazing! 😲
--tint: green;
Modern CSS is amazing! 😲
Having a blast re-designing all the React Aria examples this week. Flat design is so over – bring back depth! 😃
October 14, 2025 at 5:03 PM
Having a blast re-designing all the React Aria examples this week. Flat design is so over – bring back depth! 😃
What a nice view to wake up to for React Conf!
October 6, 2025 at 4:42 PM
What a nice view to wake up to for React Conf!
Here's the demo shown in the video combining a Select with a TagGroup. You can add a TagGroup within a SelectValue and access the selected items via the render prop function. It also uses Autocomplete to allow filtering. Composition ftw! 😀
stackblitz.com/edit/rac-sel...
stackblitz.com/edit/rac-sel...
October 2, 2025 at 9:15 PM
Here's the demo shown in the video combining a Select with a TagGroup. You can add a TagGroup within a SelectValue and access the selected items via the render prop function. It also uses Autocomplete to allow filtering. Composition ftw! 😀
stackblitz.com/edit/rac-sel...
stackblitz.com/edit/rac-sel...
Big React Aria release! 🚀
🥳 Multi Select!
🎬 ComboBox onAction prop, e.g. "create" item
➡️ Disclosure animation
✅ New SelectionIndicator component – animations in Tabs, ToggleButtonGroup, etc.
📱 Improved modal behavior in iOS 26
📆 Calendar selectionAlignment
react-spectrum.adobe.com/releases/202...
🥳 Multi Select!
🎬 ComboBox onAction prop, e.g. "create" item
➡️ Disclosure animation
✅ New SelectionIndicator component – animations in Tabs, ToggleButtonGroup, etc.
📱 Improved modal behavior in iOS 26
📆 Calendar selectionAlignment
react-spectrum.adobe.com/releases/202...
October 2, 2025 at 8:15 PM
Big React Aria release! 🚀
🥳 Multi Select!
🎬 ComboBox onAction prop, e.g. "create" item
➡️ Disclosure animation
✅ New SelectionIndicator component – animations in Tabs, ToggleButtonGroup, etc.
📱 Improved modal behavior in iOS 26
📆 Calendar selectionAlignment
react-spectrum.adobe.com/releases/202...
🥳 Multi Select!
🎬 ComboBox onAction prop, e.g. "create" item
➡️ Disclosure animation
✅ New SelectionIndicator component – animations in Tabs, ToggleButtonGroup, etc.
📱 Improved modal behavior in iOS 26
📆 Calendar selectionAlignment
react-spectrum.adobe.com/releases/202...
Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉
stackblitz.com/edit/rac-swi...
stackblitz.com/edit/rac-swi...
September 29, 2025 at 7:32 PM
Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉
stackblitz.com/edit/rac-swi...
stackblitz.com/edit/rac-swi...
You can add a "Create" option to a React Aria ComboBox in just a few lines of code.
stackblitz.com/edit/szjf6ul...
stackblitz.com/edit/szjf6ul...
September 23, 2025 at 6:15 PM
You can add a "Create" option to a React Aria ComboBox in just a few lines of code.
stackblitz.com/edit/szjf6ul...
stackblitz.com/edit/szjf6ul...
I think I finally found a solution to reliably prevent scrolling behind modals on iOS! 😲
Works when tapping inputs, with different keyboard sizes, when the address bar is collapsed or expanded, programmatic focus, dialog scroll animations, etc.
Coming soon to React Aria! 🎉
Works when tapping inputs, with different keyboard sizes, when the address bar is collapsed or expanded, programmatic focus, dialog scroll animations, etc.
Coming soon to React Aria! 🎉
September 18, 2025 at 6:55 PM
I think I finally found a solution to reliably prevent scrolling behind modals on iOS! 😲
Works when tapping inputs, with different keyboard sizes, when the address bar is collapsed or expanded, programmatic focus, dialog scroll animations, etc.
Coming soon to React Aria! 🎉
Works when tapping inputs, with different keyboard sizes, when the address bar is collapsed or expanded, programmatic focus, dialog scroll animations, etc.
Coming soon to React Aria! 🎉
Animating React Aria Tabs, ToggleButtonGroup, etc. is about to be super easy with the new SelectionIndicator component. 🥳
• Native CSS transitions, no animation library needed.
• Works with SSR with no flicker before JS runs.
• No ResizeObserver.
• Enter + exit animations.
• Native CSS transitions, no animation library needed.
• Works with SSR with no flicker before JS runs.
• No ResizeObserver.
• Enter + exit animations.
September 16, 2025 at 8:54 PM
Animating React Aria Tabs, ToggleButtonGroup, etc. is about to be super easy with the new SelectionIndicator component. 🥳
• Native CSS transitions, no animation library needed.
• Works with SSR with no flicker before JS runs.
• No ResizeObserver.
• Enter + exit animations.
• Native CSS transitions, no animation library needed.
• Works with SSR with no flicker before JS runs.
• No ResizeObserver.
• Enter + exit animations.
In the next release of React Aria, disclosures are animatable with 2 lines of code. 🎉
height: var(--disclosure-panel-height);
transition: height 200ms;
Works with browser page search too!
height: var(--disclosure-panel-height);
transition: height 200ms;
Works with browser page search too!
September 15, 2025 at 6:32 PM
In the next release of React Aria, disclosures are animatable with 2 lines of code. 🎉
height: var(--disclosure-panel-height);
transition: height 200ms;
Works with browser page search too!
height: var(--disclosure-panel-height);
transition: height 200ms;
Works with browser page search too!
Recreated the Apple Photos UI with React Aria in just ~200 lines! Complete with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop.
Just one of the demos I'm planning for the new docs. 🙂
Just one of the demos I'm planning for the new docs. 🙂
September 8, 2025 at 8:38 PM
Recreated the Apple Photos UI with React Aria in just ~200 lines! Complete with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop.
Just one of the demos I'm planning for the new docs. 🙂
Just one of the demos I'm planning for the new docs. 🙂
The one without a role between the list and listitem. Normally listitem must be a direct descendant, but you can add role=presentation anywhere (they are basically ignored).
September 4, 2025 at 5:24 PM
The one without a role between the list and listitem. Normally listitem must be a direct descendant, but you can add role=presentation anywhere (they are basically ignored).
Autocomplete now works with more types of collection components, including GridList, Table, and TagGroup. Just wrap them in Autocomplete + SearchField, and they become filterable!
<Autocomplete>
<SearchField />
<Table />
</Autocomplete>
<Autocomplete>
<SearchField />
<Table />
</Autocomplete>
August 25, 2025 at 10:42 PM
Autocomplete now works with more types of collection components, including GridList, Table, and TagGroup. Just wrap them in Autocomplete + SearchField, and they become filterable!
<Autocomplete>
<SearchField />
<Table />
</Autocomplete>
<Autocomplete>
<SearchField />
<Table />
</Autocomplete>
You can now wrap GridListItems in a <GridListSection> to create groupings with non-focusable headers. We're working on supporting sections in Tree and Table next.
August 25, 2025 at 8:13 PM
You can now wrap GridListItems in a <GridListSection> to create groupings with non-focusable headers. We're working on supporting sections in Tree and Table next.
Origin-aware animations make scale transitions appear more natural. Instead of scaling from the center of the popover, they "emerge" from the trigger. This accounts for flipping, window collisions, arrow offset, etc.
Now 1 line:
transform-origin: var(--trigger-anchor-point);
Now 1 line:
transform-origin: var(--trigger-anchor-point);
August 25, 2025 at 7:46 PM
Origin-aware animations make scale transitions appear more natural. Instead of scaling from the center of the popover, they "emerge" from the trigger. This accounts for flipping, window collisions, arrow offset, etc.
Now 1 line:
transform-origin: var(--trigger-anchor-point);
Now 1 line:
transform-origin: var(--trigger-anchor-point);
Built an emoji picker with autocomplete, virtualized scrolling, and arrow key navigation using React Aria in ~50 lines. 😎
Combines Select, Popover, Autocomplete, SearchField, Virtualizer, and ListBox. Composition ftw!
stackblitz.com/edit/react-a...
Combines Select, Popover, Autocomplete, SearchField, Virtualizer, and ListBox. Composition ftw!
stackblitz.com/edit/react-a...
August 14, 2025 at 3:44 PM
Built an emoji picker with autocomplete, virtualized scrolling, and arrow key navigation using React Aria in ~50 lines. 😎
Combines Select, Popover, Autocomplete, SearchField, Virtualizer, and ListBox. Composition ftw!
stackblitz.com/edit/react-a...
Combines Select, Popover, Autocomplete, SearchField, Virtualizer, and ListBox. Composition ftw!
stackblitz.com/edit/react-a...
The new React Aria docs will have interactive prop controls that update both the component and the code. Configure, test, and copy into your app!
August 12, 2025 at 5:45 PM
The new React Aria docs will have interactive prop controls that update both the component and the code. Configure, test, and copy into your app!
There are live prop controls on each example which update the code as you interact with them, and options for opening in codesandbox/stackblitz/etc. too!
August 7, 2025 at 8:03 PM
There are live prop controls on each example which update the code as you interact with them, and options for opening in codesandbox/stackblitz/etc. too!
In the new React Aria docs we're working on, we collapse long code examples until you need them. But rather than just showing the top 10 lines (mostly imports), we center the relevant lines so you can see them even when collapsed. 😀
August 7, 2025 at 6:32 PM
In the new React Aria docs we're working on, we collapse long code examples until you need them. But rather than just showing the top 10 lines (mostly imports), we center the relevant lines so you can see them even when collapsed. 😀