News for hackers. Stuff that matters.
Re:Show HN: Flyon UI – Tailwind Components Library by welder on Thursday October 03, 2024 @03:36AM (#41728181)
The landscape is very crowded. For example, I've tried all of these:

- 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?

Re:Show HN: Flyon UI – Tailwind Components Library by makingstuffs on Thursday October 03, 2024 @04:13AM (#41728410)
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/
Re:Show HN: Flyon UI – Tailwind Components Library by whazor on Thursday October 03, 2024 @03:53AM (#41728295)
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.

Re:Show HN: Flyon UI – Tailwind Components Library by wg0 on Thursday October 03, 2024 @04:01AM (#41728340)
It could also be nice if it were pure HTML instead of React.
Re:Show HN: Flyon UI – Tailwind Components Library by crucialfelix on Thursday October 03, 2024 @04:12AM (#41728406)
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.

Re:Show HN: Flyon UI – Tailwind Components Library by whazor on Thursday October 03, 2024 @05:32AM (#41728923)
These components are interactive, but you can copy them to HTML by inspecting them via your browser.
Re:Show HN: Flyon UI – Tailwind Components Library by spiderfarmer on Thursday October 03, 2024 @03:49AM (#41728266)
Re:Show HN: Flyon UI – Tailwind Components Library by phforms on Thursday October 03, 2024 @04:34AM (#41728533)
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.

Re:Show HN: Flyon UI – Tailwind Components Library by worble on Thursday October 03, 2024 @05:13AM (#41728811)
>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.

Re:Show HN: Flyon UI – Tailwind Components Library by phforms on Thursday October 03, 2024 @06:03PM (#41735543)
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

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

Re:Show HN: Flyon UI – Tailwind Components Library by Saanvi001 on Thursday October 03, 2024 @05:46AM (#41729012)
In Shadcn you will have to style the components manually while Flyon UI provides styled-components. You will get Semantic classes as well.
Re:Show HN: Flyon UI – Tailwind Components Library by ajaypatel9016 on Thursday October 03, 2024 @06:59AM (#41729420)
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.

Re:Show HN: Flyon UI – Tailwind Components Library by theyknowitsxmas on Thursday October 03, 2024 @07:35AM (#41729643)
Today I learned about shadcn, thanks.
Re:Show HN: Flyon UI – Tailwind Components Library by sireat on Thursday October 03, 2024 @08:19AM (#41730010)
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.

Re:Show HN: Flyon UI – Tailwind Components Library by Terretta on Thursday October 03, 2024 @11:59AM (#41731926)
> 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-vue.com

https://github.com/birobirobiro/awesome-shadcn-ui