React Aria: A headless UI component library (opens in new tab)

It's a nice idea. I've recently been working with React more, and one of the things which can be frustrating is that it's often hard to find the right level of composability if you want to combine ready-made components. I.e. if you are looking for something like a spreadsheet as a component, maybe you find one with the correct behaviors, but it handles animations in a way you don't like. Or maybe you have to pick something non-optimal because it comes with the drag-and-drop handling you want. Or you have to build completely from scratch if you want to achieve exactly what you want.

In other words, it would be nice to have slices of UI behavior defined more orthogonally in a way which can be more freely layered, and it seems like this is a step in that direction.

React Aria is a great project! We used it to meet WCAG 2.1 level AA requirements in our chat widget. It's even hard to assess how many days of work we have saved thanks to this solution. We've covered a bit of our experience in multiple posts, e.g. with handling keyboard navigation: https://developers.livechat.com/updates/livechat-accessibili...).

react-aria is awesome. You structure your DOM and css however you want, and react-aria provides hooks that return props to spread onto your elements to make them come alive. These same hooks also give you visibility into and control of the component state, so you can also easily blend in your own custom logic for the component. It is about as flexible as a headless ui library can get. But it's also lower level and so harder to use than, say, radix primitives.

I work on Plasmic (plasmic.app), a visual builder for React. With react-aria, we're able to let our users build, say, a Select component visually however they want, and then we just use the hooks to spread the right props to the right elements, and It Just Works. See https://youtu.be/mPHS2zg2a8Y

Headless UI is an exciting space. There's only so far you can go with re-skinning material ui or antd, and no one should be building their own from scratch. These headless libraries give you all the interactivity and accessibility you need for your components, but still give you total freedom over how they look. It is the way!

Cool to see more competition to Headless UI [0] by the Tailwind guys

[0]: https://headlessui.dev/

I've been using react-aria on a personal project, as well as building a UI library at work based on TailwindCSS+React Aria. I generally really like the combination.

The maintainers are super responsive+helpful on Github and really know how to engage constructively with criticism.

I really appreciate what they're doing. The combination of TailwindCSS+React Aria provides one with a pretty great template/scaffolding for building out a fully featured component library.

The only downside that I've found is that their typescript support can be a little weird in my experience, but their approach is nonetheless well considered imo. edit: https://github.com/adobe/react-spectrum/pull/1761#issuecomme... is a decent summary of what I'm referring.

First and foremost I like hooks libraries and think there should be more of them. That said when looking at their examples this appears to require exactly the same code you would need anyways, but with the additional boilerplate required by the library. Is the goal to add intellisense for people who don't already know how to write accessible front ends? Is the goal to enable me to use a div as a button via hook instead of writing semantic HTML? Not trying to be rude but honestly not seeing the value add outside maybe the FocusScope's restoreFocus and there is no way that works 100% as expected in the wild.

IMO the community is much better served by tools that help you identify accessibility gaps during the design phase, experience your application in other usage paradigms, or audit third party packages for accessibility before taking them as dependencies. If you work with designers who love hover triggered tooltips with forms with more tooltips inside them this library cannot fix the fact that you're making a terrible experience. If you want to npm install React-ported Kendo components because you "remember they worked well with jQuery" this library will not make them accessible. Turn voiceover on, turn your screen off, eat your own dog food.

What's worse "accessibility helper libraries" like this often get used as an excuse to say "of course we made this accessible look at all the helpers in the code" but the team never actually audits to see what the experience is like (hint: your Lighthouse accessibility score does not indicate WCAG compliance), and surprise surprise they've incorrectly implemented the helpers in a way that actually degrades the experience. Then they pay my agency a lot of money to hurry up and do it the right way before the NFB lawsuit drops.

It seems really useful. But the fact that this is useful feels like a code smell in the web platform.

It would be cool to go back to HTML=schematics and CSS=styling.

Maybe CSS needs to become more capable tool to place divs more easily?

Headless UI is a great idea. As someone who was wrestling with different kinds of data tables, calendars, and rich text editors for a while, using headless UI libraries feels like a breeze.

I was under the impression Adobe was investing heavily into Web Components. I gather that didn't work out well?

can someone explain in layman terms what is headless UI?

The never ending battle between customizability and uniqueness.

If there were a standard library (adopted by all browsers) similar to the default look of iOS and Android apps, but in return you couldn't customize the look, would y'all go with that?

I haven't gotten into react yet, but am looking at a new project where it might be useful. Out of curiosity, are there drop-in compatible replacements for the standard React libraries, like maybe Preact?

What would I use a headless UI on top of my css styling when Chakra UI already follows WAI-ARIA standards for every component and it gives me all the freedom of customizing my css inline?

Isn't the point of an UI to have an ... UI after all? The only ones that I can see being headless here are customers buying in to headless UIs, headless CMSs quackery.

Man, this must be such tedious hell to test

Where is carousel?

Seeing that Adobe logo made me leave the site instantly.