4 ms·

The landscape is very crowded. For example, I've tried all of these: - https://ui.shadcn.com/ https://ui.shadcn.com/ * - https://daisyui.com/ https://daisyui.

by welder 2y ago

The landscape is very crowded. For example, I've tried all of these: - https://ui.shadcn.com/ https://ui.shadcn.com/ * - https://daisyui.com/ https://daisyui.com/ - https://www.ripple-ui.com/ https://www.ripple-ui.com/ - https://flowbite.com/ https://flowbite.com/ - https://tailblocks.cc/ https://tailblocks.cc/ - https://headlessui.com/ 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?

spiderfarmer 2y ago
For the AlpineJS / Livewire fans: - https://wireui.dev https://wireui.dev - https://fluxui.dev https://fluxui.dev - https://www.penguinui.com https://www.penguinui.com
whazor 2y ago
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.
- wg0 2y ago
  It could also be nice if it were pure HTML instead of React.
  - crucialfelix 2y ago
    Many of the components in shadcn are implemented with radix components which have the js functionality. I too have been wanting html versions of some simple non functional ones for use in Django. Daisy UI is great because it just makes custom classes using tailwind @apply so you can use them in react or server side html.
  - whazor 2y ago
    These components are interactive, but you can copy them to HTML by inspecting them via your browser.
makingstuffs 2y ago
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/ https://platejs.org/
phforms 2y ago
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.
- worble 2y ago
  >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.
- phforms 2y ago
  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 https://github.com/qwalker8408/shadcn-css/tree/main Hopefully something like this will be made official - at least there is some discussion going on in the shadcn/ui repo: https://github.com/shadcn-ui/ui/discussions/2832 https://github.com/shadcn-ui/ui/discussions/2832
Saanvi001 2y ago
In Shadcn you will have to style the components manually while Flyon UI provides styled-components. You will get Semantic classes as well.
ajaypatel9016 2y ago
Hello welder, Thanks for sharing your thoughts. Obviously, shadcn is the best library. 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.
theyknowitsxmas 2y ago
Today I learned about shadcn, thanks.
sireat 2y ago
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.
- Terretta 2y ago
  > Shadcn looks quite nice, but I wish they mentioned that it is React only (as far as I can tell). https://www.shadcn-svelte.com https://www.shadcn-svelte.com https://www.shadcn-vue.com https://www.shadcn-vue.com https://github.com/birobirobiro/awesome-shadcn-ui https://github.com/birobirobiro/awesome-shadcn-ui
deleted 2y ago
[deleted]

by welder 2y ago

spiderfarmer 2y ago

For the AlpineJS / Livewire fans: - https://wireui.dev https://wireui.dev - https://fluxui.dev https://fluxui.dev - https://www.penguinui.com https://www.penguinui.com

whazor 2y ago

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.

wg0 2y ago
It could also be nice if it were pure HTML instead of React.
- crucialfelix 2y ago
  Many of the components in shadcn are implemented with radix components which have the js functionality. I too have been wanting html versions of some simple non functional ones for use in Django. Daisy UI is great because it just makes custom classes using tailwind @apply so you can use them in react or server side html.
- whazor 2y ago
  These components are interactive, but you can copy them to HTML by inspecting them via your browser.

makingstuffs 2y ago

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/ https://platejs.org/

phforms 2y ago

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.

worble 2y ago
>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.
phforms 2y ago
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 https://github.com/qwalker8408/shadcn-css/tree/main Hopefully something like this will be made official - at least there is some discussion going on in the shadcn/ui repo: https://github.com/shadcn-ui/ui/discussions/2832 https://github.com/shadcn-ui/ui/discussions/2832

Saanvi001 2y ago

In Shadcn you will have to style the components manually while Flyon UI provides styled-components. You will get Semantic classes as well.

ajaypatel9016 2y ago

Hello welder, Thanks for sharing your thoughts. Obviously, shadcn is the best library. 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.

theyknowitsxmas 2y ago

Today I learned about shadcn, thanks.

sireat 2y ago

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.

Terretta 2y ago
> Shadcn looks quite nice, but I wish they mentioned that it is React only (as far as I can tell). https://www.shadcn-svelte.com https://www.shadcn-svelte.com https://www.shadcn-vue.com https://www.shadcn-vue.com https://github.com/birobirobiro/awesome-shadcn-ui https://github.com/birobirobiro/awesome-shadcn-ui

deleted 2y ago

[deleted]