What are headless UI libraries?

#react #ui #libraries #headless

These are libraries that help with UI components but come with zero styling.

We’ve gone through numerous solutions for styling websites/web apps. Some include Bootstrap (dear to my heart), Semantic UI, Material UI, etc.

But over the years, one problem has always been prevalent, the need for better customization experiences. Some of the solutions aforementioned usually had components styled a certain way then you had to find the special class or element to target to make them look the way you wanted. Granted, some solutions had good documentation to achieve this while some regrettably didn’t and you had to do a lot of experimentation.

Enter, headless UI libraries. Ignoring the literal translation of headless, these libraries gave you the same components and functionality, just with zero and I mean absolutely zero styles, we just had to deal with the styling ourselves.

This was a game changer and has turned into an absolute favorite for companies, solopreneurs (if they have the time to style from scratch), and anyone and everyone looking for a bit of flexibility when building websites and web apps (and mobile, and desktop...). Some of these gems include:

UI libraries aside, the whole headless rave has spread to packages and libraries for standalone components, headless text editors like Tiptap and Platejs, headless table components like Tanstack table, and more out there to explore.

In conclusion, headless is cool, try it out.