Flyonui

什麼是 FlyonUI？

FlyonUI 是一個開源組件庫，專門為 Tailwind CSS 設計，提供一系列預設設計的可自定義組件，幫助開發者快速高效地構建用戶界面。通過語義類別，FlyonUI 簡化了創建響應式和視覺吸引的網頁應用程序的過程。

FlyonUI 的特點

• 開源：FlyonUI 完全免費使用，允許開發者根據需要修改和分發代碼。
• Tailwind CSS 集成：基於 Tailwind CSS 構建，利用實用優先的 CSS 原則提供靈活和可自定義的設計框架。
• 響應式設計：所有組件都設計為響應式，確保在任何設備上（從手機到桌面）都能顯示良好。
• 語義類別：使用語義類別增強可訪問性並改善 HTML 的整體結構。
• 易於自定義：開發者可以輕鬆自定義組件以滿足特定需求，而無需大量編碼。
• 全面文檔：FlyonUI 附帶詳細文檔，使開發者能夠輕鬆理解如何實現和自定義組件。

如何使用 FlyonUI

1. 安裝：首先在您的項目中安裝 Tailwind CSS。然後，您可以通過將其添加到項目依賴中來包含 FlyonUI。

   npm install flyonui
   

2. 導入組件：將所需的組件導入到您的項目中。例如，您可以直接在 HTML 或 JavaScript 文件中導入按鈕、模態框或表單。

   import { Button } from 'flyonui';
   

3. 自定義：使用 Tailwind CSS 類別根據您的設計需求自定義組件。您可以輕鬆調整顏色、大小和其他樣式。

4. 構建和部署：一旦自定義了組件，構建您的項目並將其部署到您首選的托管服務上。

常見問題

FlyonUI 是免費使用的嗎？

是的，FlyonUI 是一個開源庫，這意味著它是免費使用、修改和分發的。

我需要了解 Tailwind CSS 才能使用 FlyonUI 嗎？

雖然不是必須的，但對 Tailwind CSS 有基本了解將幫助您充分利用 FlyonUI 的組件和自定義選項。

我可以為 FlyonUI 做貢獻嗎？

當然可以！歡迎貢獻。您可以通過報告問題、建議功能或在 GitHub 倉庫提交拉取請求來貢獻。

我可以在哪裡找到 FlyonUI 的文檔？

FlyonUI 的文檔可在官方網站 flyonui.com 上找到，您可以在那裡找到指南、示例和 API 參考。

FlyonUI 提供哪些類型的組件？

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