The namespace for “react-aria-components” includes everything though, even stuff you wouldn’t use in a ComboBox. “react-aria-components/ComboBox” only includes ComboBox related components.

The ComboBox subpath only includes components that are part of a ComboBox. For example Table is not included, but Input is.

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

Our own. We consolidated individual packages for each component down into one with subpaths. This RFC has all the details: github.com/adobe/react-...

Depends on your bundler. Most of them do a pretty good job already, but some setups (e.g. micro frontend environments) don't. Subpaths can also improve build performance by letting the bundler parse less code, but again, that depends.

This has been an absolute nightmare to test against every bundler both old and new, with different typescript settings, jest configs, using scoped packages and not, etc. Months of work to make it a backwards compatible opt-in update. I hope it's worth it! 😅

The next version of React Aria has 90% fewer dependencies (from 127 down to just 13). It also supports subpath imports, e.g. "react-aria-components/Button". This means easier upgrades, faster builds, more effective tree shaking, and improved micro-frontend support. 🚀

Now that Lightning CSS is a core ecosystem dependency, I need to improve this. I'll be reaching out to these tools soon to try to bring on representatives as maintainers. If you're interested, please reach out as well. Hopefully we can get a good core team established and speed up the process a bit.

This is incredible, but tbh I could use some help with maintenance. I appreciate sponsorships, but unfortunately this does not magically create more time for me to work on it. CSS is evolving quickly and it's hard to keep up with everything as a solo dev. I'm sorry if my slowness has affected you.

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.

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

Interesting, even for long term maintenance? Do you plan to keep the JS version as the source of truth and continuously port changes to Rust, or only maintain the Rust version in the future?

Oh sweet! Just curious - did you end up trying static Hermes for this?

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

developer.mozilla.org/en-US/docs/Mozilla/Firef...

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