iiinova — where your digital self keeps evolving

Devon Govett @devongovett.me · 01/09/2026

New React Aria release! 🧭 New NavigationTree component, perfect for sidebars. Supports expandable items, sections, keyboard navigation, action buttons, etc. ⌛️ Menu async load more 📝 TokenField selection updates 📱 iOS overlay positioning fixes react-aria.adobe.com/releases/v1-...

Screenshot of NavigationTree showing a list with Home, Files expanded with Photos and Videos nested, and Shared which is not expanded. Each item has an action menu.

0223

Devon Govett @devongovett.me · 19/08/2026

Fun CSS demo I built today: automatically compute a partially transparent white or black color that meets a target WCAG contrast ratio against an arbitrary background color. No JavaScript needed. 😃 codepen.io/editor/devon...

1406

Devon Govett @devongovett.me · 31/07/2026

New React Aria components! 🚀 🔗 PreviewTrigger – build accessible hover popovers 🐭 Context menu trigger for mouse, keyboard, and touch 🪙 TokenField (alpha) – a text input with inline tokens 📋 Editable table cells 🎹 Keyboard shortcuts 🪝 New hook docs react-aria.adobe.com/releases/v1-...

2515

Devon Govett @devongovett.me · 17/07/2026

Exciting news: React Aria is now a first-class component base in shadcn/ui! Initialize a new project with `--base aria`, or use shadcn/create to build and customize your own component library. ui.shadcn.com/docs/changel...

screenshot of shadcn/create showing supported component libraries: Base UI, React Aria, and Radix UI.

4724

Devon Govett @devongovett.me · 18/06/2026

React Aria Components v1.19.0 is out! ✨ Autocomplete supports inline completions (e.g. mentions), and a new Popover API enables positioning relative to the cursor. Also, text inputs can now be nested in GridList and Tree without breaking arrow key navigation! react-aria.adobe.com/releases/v1-...

1322

Devon Govett @devongovett.me · 28/05/2026

React Aria release! 📆 Calendar multi-select, week/day views, month/year pickers, weeksInMonth ⚓️ RangeCalendar unavailable anchor date ✅ Checkbox/Radio/Switch description and error message 👢 TableFooter ⛽️ SliderFill 💯 Non-object collection items 🧪 New test utils react-aria.adobe.com/releases/v1-...

0453

Devon Govett @devongovett.me · 15/04/2026

Expandable table rows enable a macOS Finder-like combination of a tree and a table, integrating with keyboard navigation, selection, and drag and drop.

1110

Devon Govett @devongovett.me · 28/03/2026

A free side-benefit of subpath imports is that you can easily discover what child components are supported using TypeScript autocomplete.

Code example:

import * as RAC from 'react-aria-components/ComboBox';

<RAC.ComboBox>
<RAC.Label>Label</RAC.Label>
<RAC.Input />
<RAC.Button />
<RAC.FieldError />
<RAC.Popover>
<RAC.ListBox>
<RAC.ListBoxItem>Item</RAC.ListBoxItem>
<RAC.ListBoxItem>Item</RAC.ListBoxItem>
</RAC.ListBox>
</RAC.Popover>
</RAC.ComboBox>

3321

Devon Govett @devongovett.me · 12/03/2026

Looks like Vite 8 is using Lightning CSS as the default CSS minifier! Most next-generation build tools are now using it, including Turbopack, Rspack, Tailwind, Parcel, Bun (a port), and now Vite. ⚡️

Lightning CSS is now used for CSS minification by default. You can use the build.cssMinify: 'esbuild' option to switch back to esbuild. Note that you need to install esbuild as a devDependency.

21555

Devon Govett @devongovett.me · 04/03/2026

Multi-select ComboBox was one of our most requested features. It works just like Select: set selectionMode=multiple, and use the ComboBoxValue component to render the selected values. You can show a TagGroup, a textual list, or any custom component. react-aria.adobe.com/ComboBox#tag...

<ComboBox>
<Input />
<ComboBoxValue>
{({selectedItems}) => (
<TagGroup items={selectedItems}>
{item => <Tag>{item.name}</Tag>}
</TagGroup>
)}
</ComboBoxValue>
<ComboBox>

050

Devon Govett @devongovett.me · 04/03/2026

New React Aria release! ✅ Multi-select ComboBox with customizable selection rendering (e.g. TagGroup) 🏝️ Tree sections – create labeled groups of items 💯 Better NumberField paste handling 📆 Improved Calendar month and year dropdown behavior 🐞 Lots of bug fixes! react-aria.adobe.com/releases/v1-...

3424

Devon Govett @devongovett.me · 26/02/2026

Macros allow you to generate JS values, functions, and even assets like CSS at build time. The result is inlined into the compiled JS bundle. parceljs.org/features/mac... We use macros for React Spectrum's CSS-in-JS library to generate atomic CSS at build time.

import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<div className={style({backgroundColor: 'red-400', color: 'white'})}>
{/* ... */}
</div>

070

Devon Govett @devongovett.me · 26/02/2026

unplugin-parcel-macros brings Parcel's build-time macro support to other bundlers, including Vite, Webpack, Rollup, and Esbuild. v0.2.0 adds support for WASM, so it works in browser environments like Stackblitz too! github.com/devongovett/...

import regexgen from 'regexgen' with {type: 'macro'};

// Compile a regex at build time.
// The output is inlined into the bundle.
const regex = regexgen(['foobar', 'foobaz', 'foozap', 'fooza']);

3232

Devon Govett @devongovett.me · 04/02/2026

The `render` prop receives DOM props and component state, allowing you to render router links with pre-fetching support, drive animations, reuse your existing presentational components, etc. react-aria.adobe.com/customizatio...

import {Button} from 'react-aria-components';
import {motion} from 'motion/react';

<Button
render={(domProps, {isPressed}) => (
<motion.button
{...domProps}
animate={{scale: isPressed ? 0.9 : 1}} />
)}>
Press me
</Button>

130

Devon Govett @devongovett.me · 23/01/2026

In the next version of React Aria Components, you can use the `render` prop to customize the rendered DOM element. This also receives the component state, which makes it easy to drive animations.

3551

Devon Govett @devongovett.me · 17/12/2025

Hooks are still supported, but we recommend starting with components and dropping down to hooks only where needed. You can find the hook docs for each component under "Related pages" on the right. We'll be updating those docs next year to be more integrated. Ran out of time before launch.

030

Devon Govett @devongovett.me · 16/12/2025

We’re also releasing Spectrum 2, our new design system, which is built on top of React Aria Components! It includes a brand new styling library, more components, and a fresh new look. react-spectrum.adobe.com

Screenshot of Spectrum 2 example app showing an app frame with a photo grid in a waterfall layout.

1251

Devon Govett @devongovett.me · 16/12/2025

Introducing the new React Aria docs! 🎉 All-new content and search experience. Interactive CSS and Tailwind examples to get you started quickly – just install with shadcn. New guides and full example apps. MCP server and AI integrations. Check it out! react-aria.adobe.com

910011

Devon Govett @devongovett.me · 11/12/2025

Vanilla CSS and Tailwind 🎨

Screenshot of Vanilla CSS components in light mode with a purple accent color including TextField, DatePicker, Select, Tags, Radios, Slider, Table, Menu, and more.

Screenshot of Tailwind components in light mode with a blue accent color including TextField, DatePicker, Select, Tags, Radios, Slider, Table, Menu, and more.

3440

Devon Govett @devongovett.me · 15/11/2025

What if component libraries supported in-context errors by default via async React action props? Simple DX like toasts, but better UX. 🤔

4202

Devon Govett @devongovett.me · 23/10/2025

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%;
}
}

060

Devon Govett @devongovett.me · 23/10/2025

In the next release of React Aria, tab panels support entry and exit animations (e.g. cross fade), as well as smooth height transitions. 🎉

3711

Devon Govett @devongovett.me · 20/10/2025

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.

Diagram showing current month centered in the viewport, with a month plus a placeholder on each side.

0170

Devon Govett @devongovett.me · 20/10/2025

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

2392

Devon Govett @devongovett.me · 14/10/2025

Thanks! It animates too. 😉

030

Devon Govett @devongovett.me · 14/10/2025

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

Screenshot of all the components with various color themes: indigo, blue, green, pink, red, and orange.

213117

Devon Govett @devongovett.me · 14/10/2025

Having a blast re-designing all the React Aria examples this week. Flat design is so over – bring back depth! 😃

Screenshot of various UI elements including textfield, date picker, select, tags, radios, slider, switch, checkbox, buttons, progress bar, table, number field, combobox, and menu.

81468

Devon Govett @devongovett.me · 06/10/2025

What a nice view to wake up to for React Conf!

View overlooking a lake with palm trees in the foreground.

0240

Devon Govett @devongovett.me · 02/10/2025

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

<Select>
<Label />
<SelectValue>
<TagGroup />
</SelectValue>
<Button />
<Popover>
<Autocomplete>
<SearchField />
<ListBox />
</Autocomplete>
</Popover>
</Select>

240

Devon Govett @devongovett.me · 02/10/2025

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

7795

Devon Govett @devongovett.me · 29/09/2025

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

1703

Devon Govett @devongovett.me · 23/09/2025

You can add a "Create" option to a React Aria ComboBox in just a few lines of code. stackblitz.com/edit/szjf6ul...

0161

Devon Govett @devongovett.me · 18/09/2025

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

1481

Devon Govett @devongovett.me · 16/09/2025

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.

2313

Devon Govett @devongovett.me · 15/09/2025

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!

1363

Devon Govett @devongovett.me · 08/09/2025

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

31267

Devon Govett @devongovett.me · 04/09/2025

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

110

Devon Govett @devongovett.me · 25/08/2025

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>

130

Devon Govett @devongovett.me · 25/08/2025

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.

140

Devon Govett @devongovett.me · 25/08/2025

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

250

Devon Govett @devongovett.me · 14/08/2025

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

2424

Devon Govett @devongovett.me · 12/08/2025

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!

2371

Devon Govett @devongovett.me · 07/08/2025

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!

010

Devon Govett @devongovett.me · 07/08/2025

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

Screenshot of ColorSlider code example. Code shows highlighted lines setting the value, onChange, and onChangeEnd props, with faded out code above and below.

1481

Devon Govett @devongovett.me · 27/07/2025

btw, all the diagrams in this article are rendered using graphviz in a React Server Component to generate SVG at build time. Super convenient.

Code sample showing graphviz code on the left, and server component to render it on the right.

1442

Devon Govett @devongovett.me · 23/07/2025

Our infinite scroll API is pretty cool. You render a special item at the end of your list that triggers its onLoadMore callback when scrolled into view. This enables a list to have multiple sections from different APIs, or a tree to infinite scroll within each branch.

2110

Devon Govett @devongovett.me · 12/06/2025

I'm so excited about the new React Aria docs we're working on! Gonna be so good, I'm giddy. 😀 We're focusing on conciseness. Showing rather than telling, consolidating examples, adding interactive controls, editable sandboxes, copy and paste, etc. Night and day difference.

screenshot of Tabs component documentation with toggle between Vanilla CSS and Tailwind, controls for orientation (horizontal or vertical), keyboardActivation (automatic or manual), and isDisabled. Live example output and code. Tabs to switch between files.

6552