Flyonui

O que é FlyonUI?

FlyonUI é uma biblioteca de componentes de código aberto projetada especificamente para Tailwind CSS, oferecendo uma coleção de componentes pré-projetados e personalizáveis que ajudam os desenvolvedores a construir interfaces de usuário de forma rápida e eficiente. Com classes semânticas, o FlyonUI simplifica o processo de criação de aplicações web responsivas e visualmente atraentes.

Recursos do FlyonUI

• Código Aberto: O FlyonUI é completamente gratuito para uso, permitindo que os desenvolvedores modifiquem e distribuam o código conforme necessário.
• Integração com Tailwind CSS: Construído com Tailwind CSS, aproveita os princípios de CSS utilitário para fornecer uma estrutura de design flexível e personalizável.
• Design Responsivo: Todos os componentes são projetados para serem responsivos, garantindo que fiquem ótimos em qualquer dispositivo, de mobile a desktop.
• Classes Semânticas: O uso de classes semânticas melhora a acessibilidade e aprimora a estrutura geral do HTML.
• Personalização Fácil: Os desenvolvedores podem personalizar facilmente os componentes para atender às suas necessidades específicas sem codificação extensa.
• Documentação Abrangente: O FlyonUI vem com documentação detalhada, facilitando para os desenvolvedores entenderem como implementar e personalizar os componentes.

Como Usar o FlyonUI

1. Instalação: Comece instalando o Tailwind CSS em seu projeto. Em seguida, você pode incluir o FlyonUI adicionando-o às dependências do seu projeto.

   npm install flyonui
   

2. Importar Componentes: Importe os componentes desejados para o seu projeto. Por exemplo, você pode importar botões, modais ou formulários diretamente em seus arquivos HTML ou JavaScript.

   import { Button } from 'flyonui';
   

3. Personalização: Use classes do Tailwind CSS para personalizar os componentes de acordo com os requisitos do seu design. Você pode ajustar facilmente cores, tamanhos e outros estilos.

4. Construir e Implantar: Depois de personalizar seus componentes, construa seu projeto e implante-o no serviço de hospedagem de sua preferência.

Perguntas Frequentes

O FlyonUI é gratuito para usar?

Sim, o FlyonUI é uma biblioteca de código aberto, o que significa que é gratuito para usar, modificar e distribuir.

Preciso saber Tailwind CSS para usar o FlyonUI?

Embora não seja obrigatório, ter um entendimento básico do Tailwind CSS ajudará você a aproveitar ao máximo os componentes e opções de personalização do FlyonUI.

Posso contribuir para o FlyonUI?

Absolutamente! Contribuições são bem-vindas. Você pode contribuir relatando problemas, sugerindo recursos ou enviando pull requests no repositório do GitHub.

Onde posso encontrar a documentação do FlyonUI?

A documentação do FlyonUI está disponível no site oficial flyonui.com, onde você pode encontrar guias, exemplos e referências de API.

Que tipos de componentes estão disponíveis no FlyonUI?

O FlyonUI oferece uma ampla gama de componentes, incluindo botões, formulários, modais, alertas e muito mais, todos projetados para serem facilmente personalizáveis e responsivos.

<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