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.
It's possible. We'll have an example in the new docs we're working on. stackblitz.com/edit/48ss6jk...
Project - StackBlitz
description
stackblitz.com
October 20, 2025 at 6:04 PM
It's possible. We'll have an example in the new docs we're working on. stackblitz.com/edit/48ss6jk...
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.
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! 😲
In case you missed it, here’s the recording of my talk! www.youtube.com/live/p9OcztR...
React Conf 2025 Day 2
YouTube video by React Conf
www.youtube.com
October 9, 2025 at 2:46 PM
In case you missed it, here’s the recording of my talk! www.youtube.com/live/p9OcztR...
Yes. We're still planning a TagField, which would allow "inline" editing of the tags (like the gmail "To" field). But you can get pretty close with Select + TagGroup + Autocomplete example I showed.
October 3, 2025 at 4:12 PM
Yes. We're still planning a TagField, which would allow "inline" editing of the tags (like the gmail "To" field). But you can get pretty close with Select + TagGroup + Autocomplete example I showed.
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:16 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...
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...
Cool. I've been testing it with some React Aria demos I'm working on. Very excited about it.
October 1, 2025 at 10:29 PM
Cool. I've been testing it with some React Aria demos I'm working on. Very excited about it.
Btw WCAG actually covers this. But the path to get from each page to the accessibility settings needs to itself be accessible by default so users can find it. www.w3.org/WAI/WCAG21/T...
G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast | WAI | W3C
www.w3.org
September 27, 2025 at 2:26 AM
Btw WCAG actually covers this. But the path to get from each page to the accessibility settings needs to itself be accessible by default so users can find it. www.w3.org/WAI/WCAG21/T...
I agree that user customization is helpful, but WCAG is a good default. I don’t think it’s acceptable to make the UI inaccessible by default just because there are settings to change it. Users may not be aware of these settings.
September 27, 2025 at 2:19 AM
I agree that user customization is helpful, but WCAG is a good default. I don’t think it’s acceptable to make the UI inaccessible by default just because there are settings to change it. Users may not be aware of these settings.
WCAG says 3:1. I know the algorithm isn’t perfect but the spirit is pretty clear I think. We’ve been working on similar components recently so it’s been on my mind. There are also other ways to pass than a dark border or inverted background, like adding an indicator line, bolding the text etc.
September 27, 2025 at 2:14 AM
WCAG says 3:1. I know the algorithm isn’t perfect but the spirit is pretty clear I think. We’ve been working on similar components recently so it’s been on my mind. There are also other ways to pass than a dark border or inverted background, like adding an indicator line, bolding the text etc.