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
• Getting Started
  • Installation via NPM
  • RTL (Right-to-Left) Language Support
• Available Components
  • Component Examples
• 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 ✨

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

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.

1. Install FlyonUI as a dependency:

   npm install flyonui
   

2. 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"]
   }
   

3. 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.

Explore all components

Component Examples

Accordion	Alert	Apex Charts
Button	Card	Checkbox
Dropdown	Input	Modal
Navbar	Tabs & Pills	Tooltip

Explore all components

Community 🤝

Join the FlyonUI community to discuss the library, ask questions, and share your experiences:

• 🐦 Follow us on Twitter
• 💬 Discuss on GitHub
• 🎮 Join us on Discord

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:

• TailwindCSS
• daisyUI
• Preline UI.

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.

Useful Links 🎁

• Vue CheatSheet
• Freebies
• Download Free Admin Templates
• Bootstrap 5 CheatSheet

Changelog

[1.1.0] - [2024-10-09]

Added

• Integrated the third-party Wave plugin for a ripple effect, enhancing interactive elements.

Updated

1. Corrected spelling errors for the stripped class in the table and progress sections.
2. Fixed class specificity in card.
3. Fixed a typo in the documentation: changed “sematic” to “semantic”. #6