[FlyonUI](https://flyonui.com/) is the easiest, free and open-source Tailwind CSS component library with semantic classes. 🚀

Created by [ThemeSelection](https://themeselection.com), with a commitment to empowering the open-source community. --- ## Table of Contents 📋 - [Table of Contents 📋](#table-of-contents-) - [Overview 🌏](#overview-) - [Why should I use FlyonUI? 💡](#why-should-i-use-flyonui-) - [Features ✨](#features-) - [Documentation 📚](#documentation-) - [Framework guides 🛠️](#framework-guides-️) - [Getting Started 🏁](#getting-started-) - [Installation via NPM](#installation-via-npm) - [RTL (Right-to-Left) Language Support](#rtl-right-to-left-language-support) - [Star History 🌟](#star-history-) - [Available Components 🧩](#available-components-) - [Component Examples](#component-examples) - [Community 🤝](#community-) - [Contributing 📝](#contributing-) - [Credits 🤘](#credits-) - [License ©](#license-) - [Useful Links 🎁](#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](https://tailwindcss.com/) A utility-first CSS framework that helps you build beautiful websites with ease. - [daisyUI](https://daisyui.com/) adds component semantic class names to Tailwind CSS so you can make beautiful websites faster, easier and Maintainable. - [Preline](https://preline.co/plugins.html) 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](https://flyonui.com/) 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](https://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](https://nodejs.org/en/) and [Tailwind CSS](https://tailwindcss.com/) 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 `` tag: ```html ``` For a single component, use the specific path: ```html ``` ### 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 🌟 [](https://www.star-history.com/#themeselection/flyonui&Timeline) ## 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. [Explore all components](https://flyonui.com/docs/components/accordion/) ### Component Examples

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

[Explore all components](https://flyonui.com/docs/components/accordion/) ## Community 🤝 Join the FlyonUI community to discuss the library, ask questions, and share your experiences: - 🐦 [Follow us on Twitter](https://x.com/flyonui) - 💬 [Discuss on GitHub](https://github.com/themeselection/flyonui/discussions) - 🎮 [Join us on Discord](https://discord.com/invite/kBHkY7DekX) ## 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](https://github.com/themeselection/flyonui/blob/main/.github/CONTRIBUTING.md)**. ## Credits 🤘 We are grateful for the contributions of the open-source community, particularly: - [TailwindCSS](https://tailwindcss.com/) - [daisyUI](https://daisyui.com/) - [Preline UI](https://preline.co/) These projects form the backbone of FlyonUI, allowing us to build a powerful and user-friendly UI kit. ## License © - Copyright © [ThemeSelection](https://themeselection.com/) - Licensed under [MIT](https://github.com/themeselection/flyonui/blob/main/LICENSE) - 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](https://vue-cheatsheet.themeselection.com/) - [Freebies](https://themeselection.com/item/category/freebies/) - [Download Free Admin Templates](https://themeselection.com/item/category/free-admin-templates/) - [Bootstrap 5 CheatSheet](https://bootstrap-cheatsheet.themeselection.com/)