svelte-headlessui VS headlessui

Hi everyone, I'm so happy I can finally share the project I've been working on for the past few months. Ato UI is a themeable component UI library built with UnoCSS (with the Tailwind + Windi preset) and offers both styled and headless components, since the library is build on top of other fantastic headless libraries like Headless UI and Grail UI. Skeleton was also a big inspiration, as you'll be able to see in the designer page and the token system.

You mention YAGNI, but I think the bigger blocker is "Don't reinvent the wheel" - which I think is the most misunderstood bit of programming advice out there. In my SvelteKit app, I am not using a "UI Framework" that provides components to me. I don't need to. Svelte is simple enough that I can build almost anything myself. I've looked at Skeleton's source code, and their components on average are not better than versions I have rolled myself. There are a few cases where it's better to use a framework. Sliders, for instance, have a lot of edge cases. So I use Swiper for carousels. But even then, I could build a working basic slider (that doesn't address the numerous edge cases) myself in an hour. The other case is Headless UI but even there, I disagree with how he implemented some things and it's possible to roll your own Svelte Headless UI just from Tailwind's source.

I've been using https://github.com/captaincodeman/svelte-headlessui/ since previous with react I was using headlessui w/ tailwid.

I've also seen this alternative library utilising svelte use:action directive rather than components.

Tailwind CSS ecosystem features growing resources like Tailwind UI (a component library), Headless UI (unstyled, accessible components), and community-built plugins. It’s maintained by a smaller company (Tailwind Labs) but has very active development and a dedicated community of web developers.

Website: headlessui.com

An evolution of the popular Headless UI library, now offering more pre-styled components while maintaining its focus on accessibility and customization.

Headless UI

Headless UI is a design pattern and library that separates the logic and behavior of a user interface component from its visual representation. It provides completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Headless UI for various interface component logic.

Guys, didn't you get the memo? We're doing this differently now, we've replaced

https://github.com/jquery/jquery-ui/blob/main/ui/widgets/tab...

with the much better, much simpler, more readable and not at all depending on 42(!) modules

https://github.com/tailwindlabs/headlessui/blob/main/package...

What joy!

Svelte Headless UI is a library of unstyled, accessible UI components, inspired by Tailwind's Headless UI. It gives you all the interactivity without enforcing styles, allowing you to design the components exactly the way you want. With Svelte’s reactivity and this library's flexibility, building complex UI interactions has never been easier. Github repository →