https://github.com/themeselection/flyonui

🚀 The easiest, free and open-source Tailwind CSS component library with semantic classes.
https://github.com/themeselection/flyonui

component-library components css design-system html hugo javascript postcss semantic tailwind tailwind-css tailwind-css-template tailwind-plugin tailwindcss tailwindcss-components-library typescript ui-framework ui-library uikit webpack

Last synced: 12 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/themeselection/flyonui
• Owner: themeselection
• License: other
• Created: 2024-09-10T06:07:12.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-10-25T12:56:27.000Z (6 months ago)
• Last Synced: 2024-10-30T09:57:16.254Z (6 months ago)
• Topics: component-library, components, css, design-system, html, hugo, javascript, postcss, semantic, tailwind, tailwind-css, tailwind-css-template, tailwind-plugin, tailwindcss, tailwindcss-components-library, typescript, ui-framework, ui-library, uikit, webpack
• Language: CSS
• Homepage: https://flyonui.com/
• Size: 550 KB
• Stars: 868
• Watchers: 13
• Forks: 30
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• trackawesomelist - FlyonUI (⭐745) - [Integrate](https://flyonui.com/framework-integrations/angular/) FlyonUI with Angular and Tailwind CSS to create a modern, responsive UI, streamlining your development process efficiently. (Recently Updated / [Oct 19, 2024](/content/2024/10/19/README.md))
• fucking-awesome-angular - FlyonUI - 🌎 [Integrate](flyonui.com/framework-integrations/angular/) FlyonUI with Angular and Tailwind CSS to create a modern, responsive UI, streamlining your development process efficiently. (Table of contents / Third Party Components)
• awesome-angular - FlyonUI - [Integrate](https://flyonui.com/framework-integrations/angular/) FlyonUI with Angular and Tailwind CSS to create a modern, responsive UI, streamlining your development process efficiently. (Table of contents / Third Party Components)
• my-awesome-list - flyonui - source Tailwind CSS component library with semantic classes. | themeselection | 1925 | (TypeScript)

README

        


  





[FlyonUI](https://flyonui.com/) is the easiest, free and open-source Tailwind CSS component library with semantic classes. 🚀



    

    

    

    

      

   





  



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

  

    HTML

    React

    Nextjs

    Vue

    Nuxtjs

  

  

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

  

  

    Angular

    Svelte

    Remix

    Astro

    Qwik

  

  

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

  

  

    SolidJS

    Django

    Flask

    Laravel

    11ty

  

  

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

  

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

   // If you gitignored node_modules use below method

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