Hacker News Reader

Comment by deltaci | Hacker News Reader

can someone explain in layman terms what is headless UI?

"Bring your own UI". You get the behavior from the library but they are completely unstyled or without the component layer where the styles live. Other libraries include Radix and HeadlessUI. Here's a presentation from one of the Radix library authors about how to build dropdowns in React, it serves as a good explainer about what goes into a headless UI library component. https://www.youtube.com/watch?v=lY-RQjWeweo

Why not just use default html elements?

Some common, but complex, UI components are hard to get right, especially when it comes to accessibility. Combo boxes in particular come to mind.

Yeah ComboBox is one of the most difficult. We wrote a post about the work that went into ours. https://react-spectrum.adobe.com/blog/building-a-combobox.ht...

There’s a lot of UI elements that are not in the set of html elements. Sometimes you need different behaviours.

I think it’s still best to build on the native elements first though.

They’re pretty lacking. <select> is a great example: no searching/filtering, no ability to have styled/multiline text in <option>s, nor anything that’s not plain text (so no SVG iconography for example).

People constantly have to reinvent the wheel to offer fairly basic functionality, so it’s good that there are libraries to handle the behaviour and accessibility side well while supporting whatever visual styles you want to make.

I feel like a big problem here is that the Getting Started starts with a bunch of code that just... outputs a bare button. Starting with something like a combobox would show much more value.

'headless' means you bring your own html structure, the library provides interaction and state exposed by props or hooks. As such, I am not sure Headless UI is headless since they only let you bring your own CSS. At that point, it's a lot easier to create your own set of components that you have full control over than to include another NPM dependency.

I think you are supposed to do the rendering, it just gives you the behaviors.

https://www.merrickchristensen.com/articles/headless-user-in...

It give you the behaviours needed to implement a UI component, but it doesn’t give you any styling.

It's not a thing, this is just a term made up on the spot by the author of this article to describe a component library that has no built-in style.

"What does it even do then" you ask. It implements basic accessibility patterns so you only deal with high level UI elements and not have to worry about having the correct `role-` or `aria-` attributes. That and composite elements such as tabs or modals

Why no style? Most product teams have a design system and they actually overwrite the style of component libraries anyway. So better to have component libraries without style, less bloat.

HeadlessUI[1] has been around for over a year, it's not a term this author made up

[1] https://headlessui.dev/

HeadlessUI is one of the newcomers, with a lot of name recognition due to its affiliation with the wildly popular library Tailwind. The term has been around much longer. The first commit of the awesome list was over 3 years ago, and I suspect the term was already fairly established at that point: https://github.com/jxom/awesome-react-headless-components/co...

I mean, at some point someone made up the term, but it's been floating around for years to describe this exact concept.

Reply on news.ycombinator.com