flyonui
v1.1.0
Published
The easiest, free and open-source Tailwind CSS component library with semantic classes.
Downloads
2,706
Maintainers
Readme
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
- Getting Started
- Available Components
- Community
- Credits
- License
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 🛠️
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 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.
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.
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 78+ components, from basic elements like buttons and cards to more complex third-party integrations.
Component Examples
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 FalyonUI, 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.