[cehrlich]

Not entirely on topic, but is there anything like a “generic component library” that just gives accessibility and has as little opinion about design as possible, but can them be styled with Tailwind?

I think Tailwind is a great way to get a good looking site very fast, but I’d rather use eg a Toggle component that someone else built and tested than create my own and inevitably make some kind of accessibility mistake.

[johtso]

Maybe check out the recently released Zag that uses state machines under the hood to target multiple front end frameworks: https://zagjs.com/

[frosted-flakes]

I've gone in the other direction and write plain HTML tags now (in React, or anywhere), then augment it with functionality by passing a reference to the relevant element to a helper class. Very much like A11yDialog[1], which is likely the most well-known example of this concept. The helper class is vanilla Javascript and the API of the class is the DOM itself: if you don't use the correct aria-x and role attributes, it will warn you.

I do this because I hate dealing with the opaqueness of UI components. Every one has its own completely different API, every one imposes unnecessary constraints, and styling them requires you to submit to whatever styling method the library author thinks is best. I just want to have direct control over the DOM dammit! without having some busybody middleman library getting in the way.

This approach makes it very easy to, for example, have a menu button and its menu in completely different parts of the tree, making styling effortless. The helper class handles focus management, so the exact HTML isn't important, as long as the correct attributes are present.

[1] https://a11y-dialog.netlify.app/

[pictur]

https://www.radix-ui.com/

[nextrandomuser]

Plain UI was created with that idea in mind, and it's available in Tailwind, Bootstrap and Bulma!

https://shuffle.dev/blog/2022/01/plain-ui-simple-template-fo...

[sp33der89]

I personally like and use DaisyUI for such "components" type of things: https://daisyui.com/

Does its job, gets out of my and helpful docs as well.

[lobstrosity420]

Yes, there are tons of those now. No doubt because of the popularity of things like Tailwind. This one is particularly popular: https://headlessui.dev/

[throwingrocks]

https://react-spectrum.adobe.com/react-aria/

[frosted-flakes]

It's a cool idea and I was excited about it at first, but that library is so hard to work with. Way too many layers upon layers of abstraction, and it relies very much on an implicit, nested API that makes it hard to suit your own needs (for your own component's API). Also, the API docs kind-of suck—the docs are good at giving a general overview, but finding specifics about what a particular function returns inevitably seems to require digging into the source code (maybe that's changed, it's been about a year since I tried it).

Horrible experience.

[chrisweekly]

Radix is pretty close