themeselection
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.
Table of Contents 📋
- Table of Contents 📋
- Overview 🌏
- Why should I use FlyonUI? 💡
- Features ✨
- Documentation 📚
- Framework guides 🛠️
- Getting Started 🏁
- Star History 🌟
- Available Components 🧩
- Community 🤝
- Contributing 📝
- Credits 🤘
- License ©
- Useful Links 🎁
Overview 🌏
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:
- Tailwind CSS A utility-first CSS framework that helps you build beautiful websites with ease.
- daisyUI adds component semantic class names to Tailwind CSS so you can make beautiful websites faster, easier and Maintainable.
- Preline JavaScript headless & fully unstyled Tailwind plugins for accessible, responsive UI. Enhance experiences with animations, transitions, and more.
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 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.
- Beautiful and Semantic Styling: Utilize comprehensive CSS components with semantic class names for a clean and readable codebase.
- Interactive and Dynamic Features: Incorporate Headless JavaScript plugins for ex: Accordion, Dropdown, Overlay etc… to add interactivity and dynamic behavior to your UI components.
- Efficiency and Productivity: Enjoy a faster and more efficient development process by combining the strengths of semantic classes and JS plugins.
- Maintainable and Scalable: Keep your projects maintainable and scalable with a consistent coding approach and powerful JS plugins.
Features ✨
- 800+ Free Components Examples: Hundreds of component examples for all your WebApp needs that meet accessibility criteria.
- Universal Framework Compatibility: Fully compatible wherever Tailwind CSS is in action, from React to Vue and beyond.
- Unlimited Themes: Customize your app’s look and feel with FlyonUI’s theming capabilities. Refer to the theme section for more details.
- Unstyled & Accessible Plugins: Seamlessly add unstyled, accessible plugins for functionality without sacrificing design.
- Responsive & RTL support : Built with responsiveness in mind, ensuring your app looks great on all devices with RTL language support.
- Free Forever: Completely free forever, open-source, and built for the community.
Documentation 📚
For comprehensive documentation, please visit flyonui.com.
Framework guides 🛠️
| HTML | React | Nextjs | Vue | Nuxtjs |
|
|
|
|
|
| Angular | Svelte | Remix | Astro | Qwik |
|
|
|
|
|
| SolidJS | Django | Flask | Laravel | 11ty |
|
|
|
|
|
Getting Started 🏁
FlyonUI can be easily integrated into any existing Tailwind CSS project.
Installation via NPM
To use FlyonUI, ensure that you have Node.js and Tailwind CSS installed.
Install FlyonUI as a dependency:
npm install flyonuiInclude FlyonUI as a plugin in your
app.cssfile:`css @import "tailwindcss"; @plugin "flyonui"; @import "./node_modules/flyonui/variants.css"; // Require only if you want to use FlyonUI JS component
@source "./node_modules/flyonui/dist/index.js"; // 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:
```css
@source "./node_modules/flyonui/dist/accordion.js";For enabling interactive components such as accordion, dropdown, modal etc... , include FlyonUI's JavaScript in your HTML file, just 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/accordion.js"></script>
RTL (Right-to-Left) Language Support
FlyonUI components offer native RTL support. Simply add the dir="rtl" attribute to your HTML element to enable this feature.
Star History 🌟
Available Components 🧩
FlyonUI provides a robust library of UI components built with Tailwind CSS utility classes, enabling fast and efficient web development. Our library includes 80+ components, from basic elements like buttons and cards to more complex third-party integrations.
Component Examples
| Accordion | Alert | Apex Charts |
|
|
|
| Button | Card | Checkbox |
|
|
|
| Dropdown | Input | Modal |
|
|
|
| Navbar | Tabs & Pills | Tooltip |
|
|
|
Community 🤝
Join the FlyonUI community to discuss the library, ask questions, and share your experiences:
Contributing 📝
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.
Credits 🤘
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.
License ©
- Copyright © ThemeSelection
- Licensed under MIT
- FlyonUI is open-source software licensed under the MIT License.You can use our free items for personal as well as commercial purposes.