flyonui
v2.4.1
The easiest, free and open-source Tailwind CSS component library with semantic classes.
0/weekUpdated 4 months agoMITUnpacked: 4.5 MB
Published by ThemeSelection
npm install flyonui
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 🏁
- Installation via NPM
- RTL (Right-to-Left) Language Support
- Star History 🌟
- Available Components 🧩
- Component Examples
- 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 ✨
1. 800+ Free Components Examples: Hundreds of component examples for all your WebApp needs that meet accessibility criteria.
2. Universal Framework Compatibility: Fully compatible wherever Tailwind CSS is in action, from React to Vue and beyond.
3. Unlimited Themes: Customize your app’s look and feel with FlyonUI’s theming capabilities. Refer to the theme section for more details.
4. Unstyled & Accessible Plugins: Seamlessly add unstyled, accessible plugins for functionality without sacrificing design.
5. Responsive & RTL support : Built with responsiveness in mind, ensuring your app looks great on all devices with RTL language support.
6. 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.
$3
To use FlyonUI, ensure that you have Node.js and Tailwind CSS installed.
1. Install FlyonUI as a dependency:
``bash`
npm install flyonui
2. Include FlyonUI as a plugin in your app.css file:
`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";
3. For enabling interactive components such as accordion, dropdown, modal etc... , include FlyonUI's JavaScript in your HTML file, just before the closing
