Flyonui

作成者：

themeselection•Aug 11, 2025

🚀 最も簡単で、無料のオープンソースのTailwind CSSコンポーネントライブラリで、セマンティッククラスを使用しています。

概要

FlyonUIとは？

FlyonUIは、Tailwind CSS専用に設計されたオープンソースのコンポーネントライブラリで、開発者が迅速かつ効率的にユーザーインターフェースを構築するための、事前にデザインされたカスタマイズ可能なコンポーネントのコレクションを提供します。セマンティッククラスを使用することで、FlyonUIはレスポンシブで視覚的に魅力的なウェブアプリケーションを作成するプロセスを簡素化します。

FlyonUIの特徴

オープンソース：FlyonUIは完全に無料で使用でき、開発者は必要に応じてコードを修正・配布できます。
Tailwind CSS統合：Tailwind CSSを使用して構築されており、ユーティリティファーストのCSS原則を活用して、柔軟でカスタマイズ可能なデザインフレームワークを提供します。
レスポンシブデザイン：すべてのコンポーネントはレスポンシブに設計されており、モバイルからデスクトップまで、どのデバイスでも美しく表示されます。
セマンティッククラス：セマンティッククラスの使用は、アクセシビリティを向上させ、HTMLの全体的な構造を改善します。
簡単なカスタマイズ：開発者は、広範なコーディングなしで、特定のニーズに合わせてコンポーネントを簡単にカスタマイズできます。
包括的なドキュメント：FlyonUIには詳細なドキュメントが付属しており、開発者がコンポーネントの実装とカスタマイズ方法を理解しやすくなっています。

FlyonUIの使い方

インストール：プロジェクトにTailwind CSSをインストールすることから始めます。その後、FlyonUIをプロジェクトの依存関係に追加します。
```
npm install flyonui
```
コンポーネントのインポート：必要なコンポーネントをプロジェクトにインポートします。たとえば、ボタン、モーダル、フォームをHTMLやJavaScriptファイルに直接インポートできます。
```
import { Button } from 'flyonui';
```
カスタマイズ：Tailwind CSSのクラスを使用して、デザイン要件に応じてコンポーネントをカスタマイズします。色、サイズ、その他のスタイルを簡単に調整できます。
ビルドとデプロイ：コンポーネントをカスタマイズしたら、プロジェクトをビルドし、希望のホスティングサービスにデプロイします。

よくある質問

FlyonUIは無料で使用できますか？

はい、FlyonUIはオープンソースライブラリであり、使用、修正、配布が無料です。

FlyonUIを使用するためにTailwind CSSを知っている必要がありますか？

必須ではありませんが、Tailwind CSSの基本的な理解があれば、FlyonUIのコンポーネントやカスタマイズオプションを最大限に活用できます。

FlyonUIに貢献できますか？

もちろんです！貢献は大歓迎です。問題を報告したり、機能を提案したり、GitHubリポジトリにプルリクエストを送信することで貢献できます。

FlyonUIのドキュメントはどこにありますか？

FlyonUIのドキュメントは公式ウェブサイト flyonui.com で入手でき、ガイド、例、APIリファレンスを見つけることができます。

FlyonUIにはどのようなコンポーネントがありますか？

FlyonUIは、ボタン、フォーム、モーダル、アラートなど、簡単にカスタマイズ可能でレスポンシブな設計の幅広いコンポーネントを提供しています。

詳細

FlyonUI is the easiest, free and open-source Tailwind CSS component library with semantic classes. 🚀

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 ✨

800+ Free Components Examples: Hundreds of component examples for all your WebApp needs that meet accessibility criteria.
Universal Framework Compatibility: Fully compatible wherever Tailwind CSS is in action, from React to Vue and beyond.
Unlimited Themes: Customize your app’s look and feel with FlyonUI’s theming capabilities. Refer to the theme section for more details.
Unstyled & Accessible Plugins: Seamlessly add unstyled, accessible plugins for functionality without sacrificing design.
Responsive & RTL support : Built with responsiveness in mind, ensuring your app looks great on all devices with RTL language support.
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.

Install FlyonUI as a dependency:
```
npm install flyonui
```

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

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:

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:

These projects form the backbone of FlyonUI, allowing us to build a powerful and user-friendly UI kit.

License ©

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 🎁

サーバー設定

{
  "mcpServers": {
    "flyonui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "flyonui-mcp",
        "API_KEY="YOUR_API_KEY""
      ]
    }
  }
}

プロジェクト情報

著者

themeselection

Flyonui

概要

FlyonUIとは？

FlyonUIの特徴

FlyonUIの使い方

よくある質問

FlyonUIは無料で使用できますか？

FlyonUIを使用するためにTailwind CSSを知っている必要がありますか？

FlyonUIに貢献できますか？

FlyonUIのドキュメントはどこにありますか？

FlyonUIにはどのようなコンポーネントがありますか？

詳細

Table of Contents 📋

Overview 🌏

Why should I use FlyonUI? 💡

Features ✨

Documentation 📚

Framework guides 🛠️

Getting Started 🏁

Installation via NPM

RTL (Right-to-Left) Language Support

Star History 🌟

Available Components 🧩

Component Examples

Community 🤝

Contributing 📝

Credits 🤘

License ©

Useful Links 🎁

サーバー設定

プロジェクト情報

Flyonui 代替案

Chess.com MCPサーバー

Azure Data Explorer Mcp サーバー

Gitee Mcpサーバー

Airbnb 検索 & リスティングデスクトップ拡張 (dxt)

McpサーバーUnityカタログ: UnityカタログMcpサーバー

Octomind Mcpサーバー: エージェントがE2Eテストを作成および管理できるようにする

Tfmcp: Terraformモデルコンテキストプロトコルツール

Jira Mcp

Flyonui

概要

FlyonUIとは？

FlyonUIの特徴

FlyonUIの使い方

よくある質問

FlyonUIは無料で使用できますか？

FlyonUIを使用するためにTailwind CSSを知っている必要がありますか？

FlyonUIに貢献できますか？

FlyonUIのドキュメントはどこにありますか？

FlyonUIにはどのようなコンポーネントがありますか？

詳細

Table of Contents 📋

Overview 🌏

Why should I use FlyonUI? 💡

Features ✨

Documentation 📚

Framework guides 🛠️

Getting Started 🏁

Installation via NPM

RTL (Right-to-Left) Language Support

Star History 🌟

Available Components 🧩

Component Examples

Community 🤝

Contributing 📝

Credits 🤘

License ©

Useful Links 🎁

サーバー設定

プロジェクト情報

Flyonui 代替案

Chess.com MCPサーバー

Azure Data Explorer Mcp サーバー

Gitee Mcpサーバー

Airbnb 検索 & リスティング デスクトップ拡張 (dxt)

McpサーバーUnityカタログ: UnityカタログMcpサーバー

Octomind Mcpサーバー: エージェントがE2Eテストを作成および管理できるようにする

Tfmcp: Terraformモデルコンテキストプロトコルツール

Jira Mcp

Airbnb 検索 & リスティングデスクトップ拡張 (dxt)