FlyonUI

FlyonUI is a free, open-source Tailwind CSS component library from ThemeSelection that pairs semantic component classes with headless JavaScript plugins, letting developers build interactive interfaces without writing utility-class soup.

What is FlyonUI?

FlyonUI is a Tailwind CSS component library that merges the semantic class naming of daisyUI with the headless, unstyled JavaScript plugins of Preline. It outputs a collection of 80+ components and 800+ examples, delivered as an npm package that drops into any Tailwind CSS project. Created by ThemeSelection, FlyonUI is MIT-licensed and designed for developers who want maintainable markup plus interactive behavior like accordions, dropdowns, and modals.

Key Features

• Semantic class names — Use classes like alert and card instead of long utility chains, keeping the HTML readable and maintainable.
• Headless JavaScript plugins — Accordion, dropdown, overlay, modal, and tooltip interactions come unstyled and accessible, so you can apply your own design system.
• 80+ components — From buttons, cards, and checkboxes to navbars, tabs, and tooltips, all built on Tailwind utility classes.
• 800+ free examples — The docs include hundreds of ready-to-copy component examples that meet accessibility criteria.
• Universal framework compatibility — Works with any stack that uses Tailwind CSS, including React, Vue, Next.js, Nuxt, Angular, Svelte, Remix, Astro, Qwik, SolidJS, Django, Flask, Laravel, and 11ty, with dedicated integration guides.
• Unlimited theming — Customize appearance beyond Tailwind's default palette using FlyonUI's theming options.
• RTL support — Add dir="rtl" to any element for native right-to-left language support.
• Free and open source — The original code is MIT-licensed; bundled Preline and daisyUI components retain their own licenses.

Who is it for?

• Tailwind CSS developers who want to avoid utility-class clutter and need built-in interactive components.
• Full-stack developers building admin panels, dashboards, or marketing sites across React, Vue, Laravel, Django, and other frameworks covered by the integration guides.
• Design-systems engineers who need a semantic class layer on top of Tailwind while keeping full control over styling.
• RTL-focused product teams building Arabic, Hebrew, or Persian interfaces, thanks to native RTL support.

What can you do with FlyonUI?

• Frontend developers — Install the npm package, add the plugin to app.css, and include the JavaScript bundle to get accordions, dropdowns, modals, and more working out of the box.
• Component library maintainers — Fork or extend FlyonUI's 80+ components using Tailwind utility classes and headless plugins as a starting point.
• Rapid prototyping teams — Copy any of the 800+ examples from the docs to quickly assemble navigation, forms, and overlays for a functional mockup.
• Open-source contributors — Submit pull requests to add new features, with contribution guidelines available in the repository.

How does FlyonUI work?

1. Install FlyonUI with npm install flyonui.
2. Add @plugin "flyonui" to your app.css file, and optionally import variants.css and the JavaScript source for interactive components.
3. Include <script src="../node_modules/flyonui/flyonui.js"></script> before the closing body tag, or load individual plugins like dist/accordion.js for only the components you need.
4. Use semantic component classes in your HTML and add dir="rtl" for right-to-left languages.

Pricing

FlyonUI is completely free forever, open-source, and MIT-licensed. There are no paid tiers or premium components mentioned in the documentation.

Alternatives

• daisyUI — Another Tailwind CSS component library with semantic class names, but it doesn't bundle the same headless JavaScript plugins that FlyonUI adds on top.
• Preline — A headless, unstyled JavaScript plugin set for Tailwind CSS; it provides interactivity but lacks the ready-made semantic component classes that FlyonUI includes.

FAQ

Is FlyonUI free?

Yes, FlyonUI is completely free forever. Its original code is MIT-licensed, and it is open-source for the community. Bundled third-party components from Preline and daisyUI are redistributed under their own licenses.

Does FlyonUI work with React?

Yes. FlyonUI is compatible with any project that uses Tailwind CSS, and the docs include dedicated framework integration guides for React, Next.js, Vue, Nuxt, Angular, Svelte, Remix, Astro, Qwik, SolidJS, Django, Flask, Laravel, and 11ty.

How do I install FlyonUI?

Install the package with npm install flyonui, then add @plugin "flyonui" to your app.css and optionally import variants.css and the dist/index.js source. Include the flyonui.js script before the closing body tag to activate interactive components.

Does FlyonUI support RTL languages?

Yes, FlyonUI components have native RTL support. You simply add the dir="rtl" attribute to your HTML element to enable right-to-left language display.

What are the system requirements for FlyonUI?

You need Node.js and an existing Tailwind CSS project. FlyonUI is installed via npm and requires no other build tools, though it also works with bundlers like webpack and postcss, which are listed among the project's topics.