flyonui

<a href="https://flyonui.com"> <img alt="flyonui logo" width="800" src="https://cdn.flyonui.com/fy-assets/smm/marketing/flyonui-smm-banner.png"> </a><br/><br/> [FlyonUI](https://flyonui.com/) is the easiest, free and open-source Tailwind CSS component library with semantic classes. 🚀 <p> <a href="https://www.npmjs.com/package/flyonui"><img src="https://img.shields.io/npm/dt/flyonui.svg" alt="Total Downloads on NPM"></a> <a href="https://github.com/themeselection/flyonui/releases"><img src="https://img.shields.io/npm/v/flyonui.svg" alt="Latest Version"></a> <a href="https://flyonui.com/docs/getting-started/license/"><img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT License"></a> <a href="https://x.com/flyonui" target="_blank"> <img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/flyonui"> </a> </p> <a href="https://themeselection.com" target="_blank"> <img src="https://cdn.themeselection.com/ts-assets/themeselection/logo/logo.png" alt="themeselection logo" height="30" /> </a> 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) - [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 🛠️ <table> <tr> <td width="20%" align="center">HTML</td> <td width="20%" align="center">React</td> <td width="20%" align="center">Nextjs</td> <td width="20%" align="center">Vue</td> <td width="20%" align="center">Nuxtjs</td> </tr> <tr> <td width="20%" align="center"> <a href="https://flyonui.com/docs/getting-started/quick-start/"> <img src="https://cdn.flyonui.com/fy-assets/icons/html-icon.png" alt="Html logo" width="70" /> </a> </td> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/react/"> <img src="https://cdn.flyonui.com/fy-assets/icons/react-icon.png" alt="React logo" width="70" /> </a> </td> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/nextjs/"> <img src="https://cdn.flyonui.com/fy-assets/icons/nextjs-icon.png" alt="Nextjs logo" width="70" /> </a> </td> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/vuejs/"> <img src="https://cdn.flyonui.com/fy-assets/icons/vue-vite-icon.png" alt="Vue logo" width="70" /> </a> </td> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/nuxtjs/"> <img src="https://cdn.flyonui.com/fy-assets/icons/nuxt-icon.png" alt="Nuxtjs logo" width="70" /> </a> </td> </tr> <tr> <td width="20%" align="center">Angular</td> <td width="20%" align="center">Svelte</td> <td width="20%" align="center">Remix</td> <td width="20%" align="center">Astro</td> <td width="20%" align="center">Qwik</td> </tr> <tr> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/angular/"> <img src="https://cdn.flyonui.com/fy-assets/icons/angular-icon.png" alt="Angular logo" width="70" /> </a> </td> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/svelte/"> <img src="https://cdn.flyonui.com/fy-assets/icons/svelte-icon.png" alt="Svelte logo" width="70" /> </a> </td> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/remix/"> <img src="https://cdn.flyonui.com/fy-assets/icons/remix-icon.png" alt="Remix logo" width="70" /> </a> </td> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/astro/"> <img src="https://cdn.flyonui.com/fy-assets/icons/astro-icon.png" alt="Astro logo" width="70" /> </a> </td> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/qwik/"> <img src="https://cdn.flyonui.com/fy-assets/icons/qwik-icon.png" alt="Qwik logo" width="70" /> </a> </td> </tr> <tr> <td width="20%" align="center">SolidJS</td> <td width="20%" align="center">Django</td> <td width="20%" align="center">Flask</td> <td width="20%" align="center">Laravel</td> <td width="20%" align="center">11ty</td> </tr> <tr> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/solidjs/"> <img src="https://cdn.flyonui.com/fy-assets/icons/solidjs-icon.png" alt="Django logo" width="70" /> </a> </td> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/django/"> <img src="https://cdn.flyonui.com/fy-assets/icons/django-icon.png" alt="Django logo" width="70" /> </a> </td> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/flask/"> <img src="https://cdn.flyonui.com/fy-assets/icons/flask-icon.png" alt="Flask logo" width="70" /> </a> </td> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/laravel/"> <img src="https://cdn.flyonui.com/fy-assets/icons/laravel-icon.png" alt="Laravel logo" width="70" /> </a> </td> <td width="20%" align="center"> <a href="https://flyonui.com/framework-integrations/eleventy/"> <img src="https://cdn.flyonui.com/fy-assets/icons/11ty-icon.png" alt="11ty logo" width="70" /> </a> </td> </tr> </table> ## 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 `</body>` tag: ```html <script src="../node_modules/flyonui/flyonui.js"></script> ``` For a single component, use the specific path: ```html <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. ## 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 <table> <tr> <td width="33.3333%">Accordion</td> <td width="33.3333%">Alert</td> <td width="33.3333%">Apex Charts</td> </tr> <tr> <td width="33.3333%" align="center"> <a href="https://flyonui.com/docs/components/accordion/"> <img alt="Tailwind CSS Accordion" src="https://cdn.flyonui.com/fy-assets/components-svg/components/accordion.svg"> </a> </td> <td width="33.3333%" align="center"> <a href="https://flyonui.com/docs/components/alert/"> <img alt="Tailwind CSS Alert" src="https://cdn.flyonui.com/fy-assets/components-svg/components/alert.svg"> </a> </td> <td width="33.3333%" align="center"> <a href="https://flyonui.com/docs/third-party-plugins/apex-charts/"> <img alt="Tailwind CSS Apex Charts" src="https://cdn.flyonui.com/fy-assets/components-svg/third-party-plugins/apex-charts.svg"> </a> </td> </tr> <tr> <td width="33.3333%">Button</td> <td width="33.3333%">Card</td> <td width="33.3333%">Checkbox</td> </tr> <tr> <td width="33.3333%" align="center"> <a href="https://flyonui.com/docs/components/button/"> <img alt="Tailwind CSS Button" src="https://cdn.flyonui.com/fy-assets/components-svg/components/button.svg"> </a> </td> <td width="33.3333%" align="center"> <a href="https://flyonui.com/docs/components/card/"> <img alt="Tailwind CSS Card" src="https://cdn.flyonui.com/fy-assets/components-svg/components/card.svg"> </a> </td> <td width="33.3333%" align="center"> <a href="https://flyonui.com/docs/components/checkbox/"> <img alt="Tailwind CSS Checkbox" src="https://cdn.flyonui.com/fy-assets/components-svg/form-elements/checkbox.svg"> </a> </td> </tr> <tr> <td width="33.3333%">Dropdown</td> <td width="33.3333%">Input</td> <td width="33.3333%">Modal</td> </tr> <tr> <td width="33.3333%" align="center"> <a href="https://flyonui.com/docs/overlays/dropdown/"> <img alt="Tailwind CSS Dropdown" src="https://cdn.flyonui.com/fy-assets/components-svg/overlays/dropdown.svg"> </a> </td> <td width="33.3333%" align="center"> <a href="https://flyonui.com/docs/forms/input/"> <img alt="Tailwind CSS Input" src="https://cdn.flyonui.com/fy-assets/components-svg/form-elements/input.svg"> </a> </td> <td width="33.3333%" align="center"> <a href="https://flyonui.com/docs/overlays/modal/"> <img alt="Tailwind CSS Modal" src="https://cdn.flyonui.com/fy-assets/components-svg/overlays/modal.svg"> </a> </td> </tr> <tr> <td width="33.3333%">Navbar</td> <td width="33.3333%">Tabs & Pills</td> <td width="33.3333%">Tooltip</td> </tr> <tr> <td width="33.3333%" align="center"> <a href="https://flyonui.com/docs/navigations/navbar/"> <img alt="Tailwind CSS Navbar" src="https://cdn.flyonui.com/fy-assets/components-svg/navigations/navbar.svg"> </a> </td> <td width="33.3333%" align="center"> <a href="https://flyonui.com/docs/navigations/tabs-pills/"> <img alt="Tailwind CSS Tabs & Pills" src="https://cdn.flyonui.com/fy-assets/components-svg/navigations/tabs-pills.svg"> </a> </td> <td width="33.3333%" align="center"> <a href="https://flyonui.com/docs/overlays/tooltip/"> <img alt="Tailwind CSS Tooltip" src="https://cdn.flyonui.com/fy-assets/components-svg/overlays/tooltip.svg"> </a> </td> </tr> </table> [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/)