zenstyles VS headlessui

Last I checked, Bourbon was a bit too low-level for what I wanted. It didn't have implement any type of design system but just gave some basic utilities for those that wanted to build one.

What I want is more-or-less what I started doing on https://gitlab.com/mushroomlabs/zenstyles. I took some of the code from materialize.css and stripped it from anything that depended on javascript and anything that required a specific layout definition. Basically, I wanted something that could work as a "classless CSS" that used the basic building blocks from materialize.css, so that I could use with code that was based on headless-ui components.

This approach let me, e.g, use my hub20 checkout component (vue.js) without any styling on its own and let people integrate whatever "theme" they wanted. I only got to implement 2 "zen styles" following this approach (the other is on https://github.com/mushroomlabs/hub20.frontend.app/tree/mast..., and one day I will get to extract it out and move it to the "zen styles" repo) but it was enough to prove to me that this approach was not only possible but made my work a lot easier.

- Don't use CSS.

All I'd want from a "framework" is to give a consistent set of SASS mixins, and I want to have one single sass file that generates all the CSS I need in one single place. It's not just for the purism of "separation of design and content", but also to make changes easier across a whole site.

I started doing something like that with https://gitlab.com/mushroomlabs/zenstyles, but only out of necessity for my work on Hub20, I still think that if more designers started taking this approach, there could be a substantial increase in the quality of the "theme templates" offerings. Pair it with something like https://headlessui.dev and application developers could take a basic spreadsheet to focus on functionality at first, and then you easily switch between whatever "sass theme" you wanted without having to touch any of the code.

Catalyst is a comprehensive, fully componentized UI kit for modern React projects, built on the next generation of Headless UI. With Catalyst, you can create a custom set of components to use and reuse in your projects.

And that is why I was looking for a UI library that would deliver these things for a long time and today I am happy to announce that I have found it! It is Headless UI by the Tailwind Team.

Headless UI provides a suite of unstyled, fully accessible UI components perfect for developers who want full control over their interface design. It's a developer's canvas, offering the foundational parts needed to build a user interface without dictating the aesthetics, making it ideal for those who love to integrate with Tailwind CSS. With https://headlessui.com/, you can ensure that your applications are inclusive and easy to use for everyone, while also maintaining the freedom to craft a unique look and feel that aligns with your brand or style guidelines.

GitHub stars: 22.5k GitHub link: https://github.com/tailwindlabs/headlessui Documentation: https://headlessui.com/

Website: Headless UI

Few months ago, I discovered project called Headless UI and I instantly liked the idea.

In addition to Tailwind CSS, Tailwind Labs also created Headless UI, a collection of components that work well with Tailwind CSS.

Tailwind - Headless UI