Devon Govett

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

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

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

All of these issues apply to popover too. In many cases, popovers _are_ dialogs from an a11y pov. Again, it’s great if all your deps use top layer.

For example, if top layer had been defined such that it rendered in the same z-index stacking context as the body, it could interoperate with pre-existing overlays (essentially acting like a native portal instead of a whole separate layer).

Yes as I said in the post if all of your dependencies use top-layer, and you don't care about the user's browser extensions, it's good. It's a chicken and egg problem. Ideally the CSS standards would create an easier migration path.

This can totally be implemented using existing patterns. Dialogs themselves don't have to be modal. You can have multiple dialogs open at once all of which are visible and interactive simultaneously. Basically these layers:

- app (inert)
- modal backdrop
- dialog
- dialog

From a purely technical perspective that's correct but it's also pretty user-hostile. There's no real accessibility problem with these exceptions - screen readers simply see the extra content as visible like a sighted user would. The "modal" is all content above the backdrop, not just the dialog.

I think toasts are a pretty common one that should live above dialogs. Also support chat widgets or even AI assistants these days might need to be accessed even while dialogs are opened.

Modal a11y · adobe react-spectrum · Discussion #9696 Hi, I have 2 questions related to the Modal component. In the documentation example, I tells us to use <Dialog> inside the modal. Why is it internally a <section role="dialog"> instead of a <dialog...

I'm often asked why you would use a JS library like React Aria for modals instead of the HTML <dialog> element, so I wrote up a detailed response. One of the main features of <dialog> (top layer) is also one of its weaknesses.

github.com/adobe/react-...

import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; <div className={style({backgroundColor: 'red-400', color: 'white'})}> {/* ... */} </div>

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

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

Install the new React Aria agent skills to help your AI coding tools access the docs:

$ npx skills add react-aria.adobe.com

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>

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

v1.15.0 | React Aria New year, new release, and the shine hasn’t worn off from our new documentation website! This month’s release includes expanded customization options via a new render prop, greater input flexibility i...

New React Aria release!

🎁 New `render` prop – customize DOM element, integrate router links & animation libraries
📆 Improved DateField UX – constrain invalid dates on blur instead of while typing
🤖 Agent skills
🔎 Improved doc search
🐞 80+ bug fixes

react-aria.adobe.com/releases/v1-...

feat: Add `render` prop to allow customizing DOM element by devongovett · Pull Request #9499 · adobe/react-spectrum Closes #5476, closes #5321, closes #9470, closes #9450 This adds an often-requested feature: the ability to customize the element rendered by React Aria Components and merge behavior/styles with cu...

You can also:

• Render framework link components with support for pre-fetching.
• Reuse presentational components with styles and behaviors.

We implemented a few guardrails to help avoid breaking behavior/a11y. See all the details and leave your feedback on the PR: github.com/adobe/react-...

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>

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.

Firefox 147 release notes for developers (Beta) - Mozilla | MDN This article provides information about the changes in Firefox 147 that affect developers. Firefox 147 is the current Beta version of Firefox and ships on January 13, 2026.

Firefox 147 just landed & it's pretty huge in terms of web features:

🎉 CSS anchor positioning
🎉 The navigation API
🎉 View transition types
🎉 Brotli support in Compression/DecompressionStream
🎉 CSS module imports

And more!

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147

How Parcel Bundles React Server Components YouTube video by React Conf

Looks like the React Conf talks are up! Here's mine where I attempted to explain how React Server Components actually work in ~10 minutes. 😅 www.youtube.com/watch?v=E6A2...

One thing I'd say is that the overhead of tracking everything is not free. I think it makes sense if you have slow compilation steps, or need very low latency (e.g. IDE autocomplete). But if transforms are fast already, then the bookkeeping overhead becomes noticeable.

Parcel v2 was implemented like this. We call them requests, and they are all tracked in a graph. Only requests with changed dependencies re-run. Turbopack takes this even further, with super granular function-level tracking.

It supports some TypeScript/Flow types as well. I didn’t get this working yet but someone shared a benchmark showing it was ~10x faster with types than without.

Hermes is only a JS engine (like v8) not a full runtime (like Node). But you can also expose C functions to JS, so something like that could be built on top.

Facebook's Static Hermes is kind of incredible. It can compile JavaScript into C, which is then optimized into native machine code.

I just compiled the Less.js source code into a C library. Then I called it from Rust as a native Parcel plugin (no Node). Wild. 👨‍🔬

devongovett.me/blog/static-...

Dang, classic.

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.

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

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

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

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.

Vanilla CSS and Tailwind 🎨

I think async notifications are an ok use case for toasts because the user will expect them. But toasts tend to get overused for all error handling because they are so easy to implement. Better to display those in context instead.

Example cards including Emoji Picker, Filterable CRUD Table, Gesture Driven Sheet, iOS List View, Kanban Board, Photo Library, Ripple Button, and Swipeable Tabs.

Examples