The easiest, free and open-source Tailwind CSS component library with semantic classes.
FlyonUI is the easiest, free and open-source Tailwind CSS component library with semantic classes. 🚀
Created by ThemeSelection, with a commitment to empowering the open-source community.
FlyonUI is designed to combine the best of both worlds: the aesthetic appeal of semantic classes and the powerful functionality of JS plugins.
Under the hood, it uses the strengths of:
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 Tailwind CSS Components Library 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.
For comprehensive documentation, please visit flyonui.com.
| HTML | React | Nextjs | Vue | Nuxtjs |
|
|
|
|
|
| Angular | Svelte | Remix | Astro | Qwik |
|
|
|
|
|
| Django | Flask | Laravel | ||
|
|
|
FlyonUI can be easily integrated into any existing Tailwind CSS project.
To use FlyonUI, ensure that you have Node.js and Tailwind CSS installed.
Install FlyonUI as a dependency:
npm install flyonui
Include FlyonUI as a plugin in your tailwind.config.js file:
module.exports = {
content: ["./node_modules/flyonui/dist/js/*.js"], // Require only if you want to use FlyonUI JS component
plugins: [
require("flyonui"),
require("flyonui/plugin") // Require only if you want to use FlyonUI JS component
]
}
This ensures that FlyonUI's styling is applied correctly throughout your project.
If you want to include specific js component:
module.exports = {
content: ["./node_modules/flyonui/dist/js/accordion.js"]
}
Include FlyonUI JavaScript in HTML
To enable interactive elements, include FlyonUI's JavaScript in your HTML file, right before the closing </body> tag:
<script src="../node_modules/flyonui/flyonui.js"></script>
For a single component, use the specific path:
<script src="../node_modules/flyonui/dist/js/accordion.js"></script>
This script ensures that all FlyonUI interactivity is correctly applied to your elements.
FlyonUI components offer native RTL support. Simply add the dir="rtl" attribute to your HTML element to enable this feature.
FlyonUI provides a robust library of UI components built with Tailwind CSS utility classes, enabling fast and efficient web development. Our library includes 78+ components, from basic elements like buttons and cards to more complex third-party integrations.
| Accordion | Alert | Apex Charts |
|
|
|
| Button | Card | Checkbox |
|
|
|
| Dropdown | Input | Modal |
|
|
|
| Navbar | Tabs & Pills | Tooltip |
|
|
|
Join the FlyonUI community to discuss the library, ask questions, and share your experiences:
Fix a bug, or add a new feature. You can make a pull request and see your code in the next version of FlyonUI.
Before adding a pull request, please see the contributing guidelines.
We are grateful for the contributions of the open-source community, particularly:
These projects form the backbone of FlyonUI, allowing us to build a powerful and user-friendly UI kit.
[1.3.0] - [2025-01-03]
Combo Box : Minimum search Length
Datatables : Multiple Controls
base-content/10 to base-content/20text-base-content/90 to text-base-contentoptionAllowEmptyOption has been added for Advanced SelectminSearchLength has been added for Combo Boxprev and next elements, each with its own event listeners, ensuring proper initialization and cleanup in the destroy method. Improved event listener management for search and pagination controls to prevent memory leaks and support dynamic elements.flyonui.mjs as it was creating issues while using importsetValue method functionality with tags in Advanced Select.FAQs
The easiest, free and open-source Tailwind CSS component library with semantic classes.
The npm package flyonui receives a total of 1,676 weekly downloads. As such, flyonui popularity was classified as popular.
We found that flyonui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.