9 ms·
Show HN: Flyon UI – Tailwind Components Library
- Palmik 2y agoReally love the styles. Very tasteful and subtle. I understand you want it to be framework agnostic, but are you considering version of this for Radix UI (ala shadcn) / React Aria Components?
- ajaypatel9016 2y agoHello 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.
- deleted 2y ago[deleted]
- Saanvi001 2y agoLooks really cool..!!
- devsoul 2y agoThanks for the appreciation.
- vb175 2y ago[flagged]
- decremental 2y ago[dead]
- devsoul 2y agoThanks a lot for the appreciation & detailed review.
- faloppad 2y agoLooks great and quite complete
- devsoul 2y agoThanks for the appreciation.
- hombre_fatal 2y agoThe two interactive clusters of component examples on the homepage are really amazing and well thought out. How'd you come up with the idea of having them cascade down from the right side of the webpage above the fold? Never seen that before. The docs have some serious attention to detail.
- devsoul 2y agoA huge thanks to our talented design team for their exceptional work and dedication! Their creativity and attention to detail have truly elevated the project
- icemelt8 2y agobeautiful work, can't imagine the hours that went into it
- devsoul 2y ago8 months actually...!! But worth it. The appreciation and love it is getting already, the efforts are paid off. Thanks a lot for your appreciation.
- atilimcetin 2y agoLooks great! Can you also consider supporting svelte[1] (and sveltekit[2]) officialy? [1] https://svelte.dev https://svelte.dev [2] https://kit.svelte.dev https://kit.svelte.dev
- devsoul 2y agoYes, if Daisy UI provides support to Svelte, we will surely go for it.
- rizzaxc 2y agoI'm tempted to try this in my SvelteKit app. What do I lose compared to a React user?
- husarcik 2y agoBigger ecosystem for react. Svelte is easier to develop in rapidly. I can make things much faster in Svelte, epsecially since Svelte is less complex than React. With AI code generators, I don't really even have to think, just tell it what I want. Of note, my main career isn't programming.
- seanwilson 2y agoLooks great, but for dark/Gourmet, the purple primary color and others like accent and success are too dark and don't contrast well for me. The purple fails WCAG contrast checks from a quick look.
- devsoul 2y agoThanks for the appreciation & suggestion. We will look into it.
- 1-2-3-5-8 2y agoExcellent effort and thanks in advance for publishing this.
- devsoul 2y agoYou are welcome. Thanks for the appreciation.
- sgt 2y agoLooks great. I've just been using TailwindUI (commercial) and creating components as I see fit. I base it off the HTML templates only.
- devsoul 2y agoThanks for the appreciation.
- littlestymaar 2y agoI don't understand the fascination for tools like Tailwind (or bootstrap before that). Sure when your doing very basic things it sounds cool to be able to use just a simple class to get a cool style, but then when used in hanger you end up with a list of class 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] and then I really don't understand what you've gained compared to using CSS directly… [1]: this class is taken from a flowbite component I've worked with no latter than yesterday. https://flowbite.com/docs/components/toast/#simple-toast https://flowbite.com/docs/components/toast/#simple-toast
- devsoul 2y agoWriting 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.
- input_sh 2y agoThis 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.
- aniforprez 2y agoI can honestly say that tailwind made me way better at CSS. Going through the docs to find classes I needed to do particular things and reading what they did had made me so much better at understanding what it does at a low level. I would still prefer not to write tailwind classes rather than struggle with naming bespoke classes and writing all the CSS but it's definitely made me a better and faster frontend developer
- fmnxl 2y agoIsn't this just a thin wrapper of Preline? Why use this instead of Preline?
- ajaypatel9016 2y agoHello fmnxl, Those are nice questions and we asked the same ourselves twice before we started working on this http://flyonui.com/ 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.
- rockyj 2y agoUsed https://daisyui.com/ https://daisyui.com/ which is also pretty good (and similar).
- welder 2y agoI really dislike daisy's default colors and changing them is a PITA
- wg0 2y agoMaybe it's just me but these "modern" UI kits such as Daisy and Skeleton have horrible UI color schemes, themse and aesthetics.
- ajaypatel9016 2y agoHello 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/ https://flyonui.com/docs/getting-started/introduction/
- welder 2y agoThe 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 agoFor 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 agoIt 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 agoIt could also be nice if it were pure HTML instead of React.
- crucialfelix 2y agoMany 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 agoThese components are interactive, but you can copy them to HTML by inspecting them via your browser.
- sureglymop 2y agoThis looks really good and I especially like that you also thought about "Third party plugins" and included that in the docs. Being able to integrate both fullcalendar and a wysiwyg editor easily is definitely a headstart and something that is a point of friction with most of these component libraries! I can't use it yet, since the docs are still missing the part about using this with svelte, but good to know you are working on that.
- devsoul 2y agoThank 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"
- gammacine 2y agoDoes this work with tailwind visual editors like this https://windframe.dev https://windframe.dev ?
- nprateem 2y agoLarge amount of praise from low karma accounts.
- purple-leafy 2y agoPretty sus in this thread
- kewp 2y agoTried to put it into my svelte project. Build failed. Went onto github to report it. A reproduction url is required ... so not submitting a bug ... and looking for something else to use ...
- ajaypatel9016 2y agoHello 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/ 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.
- fermigier 2y agoI'm worried about the license. Flyon contains code from Preline which is "dual licensed" under the MIT license and a proprietary "fair" license. > Preline UI is free for both personal and commercial projects, released under dual license terms "MIT" and "Preline UI Fair Use License". See: https://preline.co/docs/license.html https://preline.co/docs/license.html They don't explain if "dual license" means "and" or "or". I suspect "and", because otherwise, it wouldn't make sense since MIT is one of the less restrictive open source licenses. If it's the case, neither Flyon nor Preline are open source.
- ajaypatel9016 2y agoHello 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/ https://flyonui.com/docs/getting-started/license/
- bitlad 2y agoI think India's border is wrong in their map component[1] [1] https://flyonui.com/docs/third-party-plugins/datamaps/ https://flyonui.com/docs/third-party-plugins/datamaps/
- ajaypatel9016 2y agoWe've used an open-source library called datamaps https://datamaps.github.io/ https://datamaps.github.io/ which plots India as you're seeing on FlyonUI. Which indeed needs to be correct.
- ShanAIDev 2y agobeautiful work, This looks like an interesting project that aims to combine the power of utility classes with semantic components. I'm curious if FlyonUI is currently limited to Next.js, or if it can be used with other frontend frameworks like Nuxt.js as well?
- TheSecondMouse 2y agoI have a Daisy UI project (Sveltekit), that also integrates svelte-shadcn, as Flyon Ui uses Daisy Ui, would I no longer need to add Daisy as an import? Do I have full access to the Daisy Ui toolset? Can they be run side by side? Looks fantastic btw, congrats on the launch
- T3RMINATED 2y ago[dead]
- agos 2y agoI went to see the Select component which is something that I always do to see how component libraries tackle complexity, and was surprised (and a bit horrified) to see that components are configured by writing html inside json inside data attributes. This is going to be a pain to use: strings have to be escaped, no assistance from the editor whatsoever, all crammed inside an attribute...
- olivermuty 2y agoI see none of this in any of the Select examples. Mind sharing what you mean?
- noahjk 2y agoTake a look at Advanced Select. I think that’s the one he was referring to.
- greenie_beans 2y agothis looks nice but at first glance of an example, this code is soooooo gross. <select data-select='{ "placeholder": "Select option...", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "advance-select-toggle", "dropdownClasses": "advance-select-menu", "optionClasses": "advance-select-option selected:active", "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>", "extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>" }' class="hidden" > https://flyonui.com/docs/advanced-forms/advanced-select/#default https://flyonui.com/docs/advanced-forms/advanced-select/#def... i ain't doing that. nope. just give me tailwind classes in regular html so i can copy/paste.
- wg0 2y agoProbably 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.
- mixmastamyk 2y agoYes, 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.
- icar 2y agoI was hoping to find a contender for DaisyUI, but some of these components require JS. I wish there were more Tailwind component libraries that required 0 JS.
- gr4vityWall 2y agoThe components seem to work well and look good, but regarding its use of colors, it seems to have the same issues as DaisyUI. Lots of components have very low contrast between the inner text and the background color. Even in the front page, we can see a button with black test on top of dark grey background. Unfortunately, that's a blocker if you're building simple B2B admin panels and don't want to spend too much time tweaking your theme to make it accessible.
- Terretta 2y agoTo OP: In "Stripped tables" I think you mean "Striped", if you're talking about stripes rather than about removing the covering.
- tarasglek 2y agoI would love an editable table example. You have the edit/delete icons wired up, would love to see what enabling those looks like in practice