4 ms·

can someone explain in layman terms what is headless UI?

conorwade 5y ago
It give you the behaviours needed to implement a UI component, but it doesn’t give you any styling.
dsego 5y ago
I think you are supposed to do the rendering, it just gives you the behaviors. https://www.merrickchristensen.com/articles/headless-user-interface-components/ https://www.merrickchristensen.com/articles/headless-user-in...
jokull 5y ago
"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 https://www.youtube.com/watch?v=lY-RQjWeweo
- spyke112 5y ago
  Why not just use default html elements?
  - fnordsensei 5y ago
    Some common, but complex, UI components are hard to get right, especially when it comes to accessibility. Combo boxes in particular come to mind.
    - devongovett 5y ago
      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.html https://react-spectrum.adobe.com/blog/building-a-combobox.ht...
  - ojkelly 5y ago
    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.
  - deergomoo 5y ago
    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.
    - jorams 5y ago
      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.
nsonha 5y ago
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.
- thirdvect0r 5y ago
  HeadlessUI[1] has been around for over a year, it's not a term this author made up [1] https://headlessui.dev/ https://headlessui.dev/
  - tshaddox 5y ago
    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/commit/ba4dd2025aa97e6085b5c2829ef872fd0effcd66 https://github.com/jxom/awesome-react-headless-components/co...
- andrewingram 5y ago
  I mean, at some point someone made up the term, but it's been floating around for years to describe this exact concept.
zettadam 5y ago
'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.

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

I think you are supposed to do the rendering, it just gives you the behaviors. https://www.merrickchristensen.com/articles/headless-user-interface-components/ https://www.merrickchristensen.com/articles/headless-user-in...

jokull 5y ago

"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 https://www.youtube.com/watch?v=lY-RQjWeweo

spyke112 5y ago
Why not just use default html elements?
- fnordsensei 5y ago
  Some common, but complex, UI components are hard to get right, especially when it comes to accessibility. Combo boxes in particular come to mind.
  - devongovett 5y ago
    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.html https://react-spectrum.adobe.com/blog/building-a-combobox.ht...
- ojkelly 5y ago
  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.
- deergomoo 5y ago
  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.
  - jorams 5y ago
    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.

nsonha 5y ago

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.

thirdvect0r 5y ago
HeadlessUI[1] has been around for over a year, it's not a term this author made up [1] https://headlessui.dev/ https://headlessui.dev/
- tshaddox 5y ago
  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/commit/ba4dd2025aa97e6085b5c2829ef872fd0effcd66 https://github.com/jxom/awesome-react-headless-components/co...
andrewingram 5y ago
I mean, at some point someone made up the term, but it's been floating around for years to describe this exact concept.

zettadam 5y ago

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