I love the approach of shadcn and the fact that they use Radix primitives, which have a focus on accessibility. But I wish they would have a pure CSS option without tailwind style classes. It took me some time to translate the classes shadcn uses from tailwind to CSS (which sometimes require more research) and the variables for colors, sizes, etc. into the CSS-to-js system I use (which is stitches - yes, its deprecated, but still the best one I know).
Tailwind is nice for prototyping and simple projects, but often I find that it obscures things too much and when I need more control over the CSS it is too abstract and awkward to use.
In case anyone finds this who is also interested: I just stumbled upon an implementation of shadcn/ui components with css modules that looks pretty solid: https://github.com/qwalker8408/shadcn-css/tree/main
>Tailwind is nice for prototyping and simple projects
That's interesting because I find it quite the opposite, if all I'm doing is a quick prototype then the last thing I want to do is spend hours creating a ton of components with tailwind! I've often gotten extremely frustrated that it completely nukes basic browser styles when all I'm trying to see what it'd look like if I had some text, a form and maybe a picture on the page.
It was ShadCN which convinced me that there is a lot of utility in Tailwind TBH. Absolutely love the whole 'just copy the component to my repo' concept. Plate JS follows the same and uses the same components but is a WYSIWYG editor: https://platejs.org/
Excellent list but some apples and some oranges up there.
Shadcn looks quite nice, but I wish they mentioned that it is React only (as far as I can tell).
Some of the above support Vue and React.
Some of the above actually seem to be actual CSS libraries on top of Tailwind without any dependencies on Javascript frameworks which personally seems more sane.
For past few years I've been teaching introductory Web Dev course at a university and students do pretty well with HTML,CSS and vanilla Javascript.
They pick up on plain CSS libraries easily. They understand the need for Javascript frameworks.
However, when it comes to insanity that is complexity of Javascript based build systems, it is beyond my abilities to transfer that knowledge. It becomes just a magical bundle of commands lost in the sea of abstraction.
FlyonUI is designed to combine the best of both worlds: the aesthetic appeal of semantic classes and the powerful functionality of JS plugins.
Why should I use FlyonUI?
Using Tailwind CSS alone may lead to cluttered HTML with numerous utility classes, which can be a nightmare to maintain.
Apart from that Tailwind CSS or DaisyUI doesn’t provide any interactive headless JavaScript components like accordion, overlay, dropdowns, etc…
This is where FlyonUI shines.
FlyonUI brings together the beauty of semantic classes and the interactive headless JavaScript plugins, offering you a powerful toolkit to build stunning, interactive user interfaces with ease.
It would be nice if shadcn became the standard and you could copy components from any tailwind component library.
Technically, this would mean that all these component libraries allow you to copy-paste their components, and additionally there would be a 'standard' in theme token naming.
- https://ui.shadcn.com/ *
- https://daisyui.com/
- https://www.ripple-ui.com/
- https://flowbite.com/
- https://tailblocks.cc/
- https://headlessui.com/
* Finally settled on this one because I can edit the components easily if needed. It's basically a code generator not a component library.
I'm already set on shadcn, but still have to ask what this one does better/different?