Show HN: Flyon UI – Tailwind Components Library

Thank you for the feedback! I'm glad to hear that you found the inclusion of third-party plugins helpful. We understand that seamless integration is often a point of friction, so we've made it a priority to simplify that process.

That's the reason we have said "Easiest Tailwind CSS Components Library"

Hello Fermigier,

Thank you for sharing your input.

You’re correct that Preline has a dual license (MIT) allowing usage for both personal and commercial projects.

We've confirmed with Preline and they have implemented this license just to restrict those who utilize their code without proper attribution.

FlyonUI utilizes the Preline JS plugins to enhance the functionality of its semantic components.

As a result, it also adheres to the same licenses. For more details, please visit: https://flyonui.com/docs/getting-started/license/

Hello fmnxl,

Those are nice questions and we asked the same ourselves twice before we started working on this http://flyonui.com/.

Preline is a great library with its beauty. It uses Tailwind CSS utility clasess may lead to cluttered HTML with numerous utility classes, which can be a nightmare to maintain.

Where DaisyUI is the most popular component library for Tailwind CSS, offering a wide range of components with semantic class names. However many projects require interactive features that need JavaScript.

This is where FlyonUI shines.

FlyonUI builds on top of DaisyUI by integrating Preline’s JS plugins, offering headless, fully unstyled components that are accessible and responsive.

Pretty sus in this thread

Yes, if Daisy UI provides support to Svelte, we will surely go for it.

I see none of this in any of the Select examples. Mind sharing what you mean?

We've used an open-source library called datamaps https://datamaps.github.io/ which plots India as you're seeing on FlyonUI.

Which indeed needs to be correct.

Yes, it is beautiful on the surface, but the HTML is horrendous. For example, the first component, the accordion, doesn't use summary/details tags. Though the others seem semantic enough so far.

I was never one of those "separation of concerns" religion types, but the HTML is near unreadable. I'd much prefer something like picocss with a few extra utility classes—what I'm using now. This looks much nicer looking but, not worth dragging down my DX into the mud.

I wish there were something this beautiful as "low class" :) or even using some custom HTML elements to eliminate boilerplate. Maybe can't happen with this because it is based on tailwind?

Edit: also would like to reiterate that the dark theme needs a bit more contrast.

Probably it has been aimed at people that are horrified of Javascript. But here's the catch - having this much magic happening through this attribute soup, Javascript will bite you sooner than you think.

The first few examples might go smooth but I can't see this going without any problems even in some small scale apps.

I really dislike daisy's default colors and changing them is a PITA

Hello rockyj,

Here are some key points addressing the need for another component library on top of DaisyUI, like FlyonUI:

Additional JavaScript Support: DaisyUI is the most popular component library for Tailwind CSS, offering a wide range of components with semantic class names. But many projects require interactive features that need JavaScript. FlyonUI builds on top of DaisyUI by integrating Preline’s JS plugins, offering headless, fully unstyled components that are accessible and responsive.

Headless Architecture: FlyonUI’s headless architecture allows developers to focus on functionality, providing greater flexibility when integrating components into any UI framework or design system.

Broader Component Set: FlyonUI extends the component offering, with both UI elements and functional components that handle interactive behaviors like accordion, overlay, dropdowns, and carousels, etc.

Third-Party Component Support: FlyonUI provides built-in support for popular third-party libraries like ApexCharts, FullCalendar, Flatpickr, and Toast, etc. This allows developers to extend their UIs with advanced features.

For more details refer: https://flyonui.com/docs/getting-started/introduction/

A huge thanks to our talented design team for their exceptional work and dedication! Their creativity and attention to detail have truly elevated the project

Thanks for the appreciation & suggestion. We will look into it.

Hello Palmik,

Thanks for the appreciation. Currently we will be considering the support capabilities with JS frameworks, may be in the future we may consider Radix UI (ala shadcn.

Hello kewp,

We appreciate your feedback.

Honestly, we've just shipped our first release and we will be creating guides for the framework integration soon.

https://flyonui.com/docs/getting-started/framework-guides/

However, you can mention localhost in the URL if you're trying on the local machine or you can share stackblitz URL with setup which you have tried.

Thanks for the appreciation.

Thanks for the appreciation.

8 months actually...!! But worth it. The appreciation and love it is getting already, the efforts are paid off.

Thanks a lot for your appreciation.

You are welcome. Thanks for the appreciation.

For the AlpineJS / Livewire fans:

- https://wireui.dev

- https://fluxui.dev

- https://www.penguinui.com

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.

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/

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 Shadcn you will have to style the components manually while Flyon UI provides styled-components. You will get Semantic classes as well.

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.

Today I learned about shadcn, thanks.

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.

Writing vanilla CSS often involves the hassle of coming up with proper class names, which can become tedious. That's where Tailwind CSS shines, as it allows you to apply styles directly with utility classes. However, repeatedly using the same classes and writing many of them can become cumbersome. To simplify this, FlyonUI introduces semantic classes to streamline your work. For example, instead of writing multiple utility classes for a button, you can simply use `.btn`, and your button styling is ready to go.

This is like a backend developer asking someone using a spreadsheet why don't they just build their own database. Or a sysadmin telling you why don't you just run your own Kubernetes cluster. Unless there's like a 10 person team working on the same thing, you gotta take shortcuts somewhere.

Not here to argue that learning CSS properly isn't better, but I legit have no interest in doing so. I can copy-paste that code and be sure it'll look exactly the same on my website. I can't do the same with CSS.

A lot of people find tailwind easier to use because it cuts out the steps in CSS where you have to come up with all those names for elements/containers/wrappers etc and define the styles for them all.

The big long lines of classes are often only written once anyway as web development usually makes use of components or partials for repeated elements.

Obviously others can continue to use CSS if they prefer to do it that way.

I had my doubts, but Tailwind's mantra "looks horrible, but you need to try it!" turned out to be true for me.

You can think of Tailwind as the "APL of CSS." A single utility class can generate a lot of CSS for you, which is one advantage.

The key benefit of Tailwind is that it co-locates your CSS with your HTML, reducing cascading issues and improving maintainability.

Like any codebase, you can use your tools to add more structure and meaning.

For example, I like using a tw function like this:

    export const tw = (...classes: (string | undefined | boolean)[]) => classes.filter(Boolean).join(" ");

Using the tw function, your example classes would look something like this:

    class={tw(
      "fixed top-5 right-5 w-full max-w-xs p-4",
      "flex items-center space-x-4 divide-x divide-gray-200 rtl:divide-x-reverse dark:divide-gray-700",
      "rounded-lg shadow",
      "bg-white text-gray-500 dark:bg-gray-800 dark:text-gray-400"
    )}

I like splitting the classes into logical groups. In this case, I’m grouping by: 1) base positioning, 2) flex behavior, 3) effects, and 4) colors.

Finally, the filter in the tw function allows for easy conditional classes:

    class={tw(kind === "something" && "m-4 p-4")}

I also use Biome, which has a work-in-progress but already quite good class sorter for Tailwind [1]. This keeps the code tidy by applying a logical sort order to each string passed into the tw function.

--

1: https://github.com/biomejs/biome/pull/1362

It's more ergonomic than using stylesheets.

- No external stylesheets. No need to think about optimising the serving of CSS assets (e.g. with CDN)

- Co-locality: work on styling right where the element is, you don't have to figure out which stylesheet affects a particular element.

- No naming headache, as there's no need to give class names to elements in order to style a particular (or set of) elements

These days HTML is served compressed, with gzip/brotli, so long class attributes won't bloat the resulting file size by much.

Stylesheets still has its place of course.

I really agree on that one. Being able to define SOME (and I insist on that point) style directly in HTML is super convenient and can be a huge time saver day by day. But I think Tailwind went too far by trying to entirely replace CSS with countless classes and shortcuts. Just imagine the learning curve and the time spent by devs trying to find the right syntax for a specific transition or such...

I like the approach of tools like Perseid (https://perseid.dev/docs/ui/styling/classes), focusing only on layout design and providing a small set of built-in CSS classes (alignments, positions, margins, dimensions, …) for that purpose. All the rest (colors, shadows, fonts, animations and such) lying in good old CSS declarations.

you've gained:

- fine-grained design tokens (p-63 doesn't exist)

- freedom from having to name things prematurely

- not having to jump back and forth between index.html and styles.css

Hello littlestymaar,

Thanks for sharing your thoughts.

To deal with the huge number of class lists like this

`fixed flex items-center w-full max-w-xs p-4 space-x-4 text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200 rounded-lg shadow top-5 right-5 dark:text-gray-400 dark:divide-gray-700 dark:bg-gray-800"` [1]

We've created Flyon UI, to combine the best of both worlds: the aesthetic appeal of semantic classes and the powerful functionality of JS plugins.

With FlyonUI you can achieve this with semantic classes like:

btn btn-primary

for more details: https://flyonui.com/docs/third-party-plugins/notyf/

Thanks for the appreciation.