Flyonui

Qu'est-ce que FlyonUI ?

FlyonUI est une bibliothèque de composants open-source conçue spécifiquement pour Tailwind CSS, offrant une collection de composants pré-conçus et personnalisables qui aident les développeurs à créer des interfaces utilisateur rapidement et efficacement. Avec des classes sémantiques, FlyonUI simplifie le processus de création d'applications web réactives et visuellement attrayantes.

Caractéristiques de FlyonUI

• Open Source : FlyonUI est complètement gratuit à utiliser, permettant aux développeurs de modifier et de distribuer le code selon leurs besoins.
• Intégration de Tailwind CSS : Construit avec Tailwind CSS, il tire parti des principes CSS utilitaires pour fournir un cadre de design flexible et personnalisable.
• Design Réactif : Tous les composants sont conçus pour être réactifs, garantissant qu'ils ont fière allure sur n'importe quel appareil, du mobile au bureau.
• Classes Sémantiques : L'utilisation de classes sémantiques améliore l'accessibilité et améliore la structure globale du HTML.
• Personnalisation Facile : Les développeurs peuvent facilement personnaliser les composants pour répondre à leurs besoins spécifiques sans codage extensif.
• Documentation Complète : FlyonUI est accompagné d'une documentation détaillée, facilitant la compréhension de la manière d'implémenter et de personnaliser les composants.

Comment utiliser FlyonUI

1. Installation : Commencez par installer Tailwind CSS dans votre projet. Ensuite, vous pouvez inclure FlyonUI en l'ajoutant à vos dépendances de projet.

   npm install flyonui
   

2. Importer des Composants : Importez les composants souhaités dans votre projet. Par exemple, vous pouvez importer des boutons, des modales ou des formulaires directement dans vos fichiers HTML ou JavaScript.

   import { Button } from 'flyonui';
   

3. Personnalisation : Utilisez les classes Tailwind CSS pour personnaliser les composants selon vos exigences de design. Vous pouvez facilement ajuster les couleurs, les tailles et d'autres styles.

4. Construire et Déployer : Une fois que vous avez personnalisé vos composants, construisez votre projet et déployez-le sur votre service d'hébergement préféré.

Questions Fréquemment Posées

FlyonUI est-il gratuit à utiliser ?

Oui, FlyonUI est une bibliothèque open-source, ce qui signifie qu'elle est gratuite à utiliser, modifier et distribuer.

Dois-je connaître Tailwind CSS pour utiliser FlyonUI ?

Bien que ce ne soit pas obligatoire, avoir une compréhension de base de Tailwind CSS vous aidera à tirer le meilleur parti des composants et des options de personnalisation de FlyonUI.

Puis-je contribuer à FlyonUI ?

Absolument ! Les contributions sont les bienvenues. Vous pouvez contribuer en signalant des problèmes, en suggérant des fonctionnalités ou en soumettant des demandes de tirage sur le dépôt GitHub.

Où puis-je trouver la documentation pour FlyonUI ?

La documentation pour FlyonUI est disponible sur le site officiel flyonui.com, où vous pouvez trouver des guides, des exemples et des références API.

Quels types de composants sont disponibles dans FlyonUI ?

FlyonUI propose une large gamme de composants, y compris des boutons, des formulaires, des modales, des alertes, et plus encore, tous conçus pour être facilement personnalisables et réactifs.

<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 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, 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
• 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 🛠️

<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 and Tailwind CSS installed.

1. Install FlyonUI as a dependency:

   npm install flyonui
   

2. Include FlyonUI as a plugin in your app.css file:

   @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:

   @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:

   <script src="../node_modules/flyonui/flyonui.js"></script>
   

   For a single component, use the specific path:

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

Star History 🌟

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

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

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 FlyonUI, 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