Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 5 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 (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-25T12:56:27.000Z (3 months ago)
- Last Synced: 2024-10-30T09:57:16.254Z (3 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 | 1506 | (CSS)
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)
- [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)
- [Credits](#credits)
- [License](#license)
---
## 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
Django
Flask
Laravel
## 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 `tailwind.config.js` file:
```javascript
module.exports = {
content: ["./node_modules/flyonui/dist/js/*.js"], // Require only if you want to use FlyonUI JS component
plugins: [
require("flyonui"),
require("flyonui/plugin") // 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:
```javascript
module.exports = {
content: ["./node_modules/flyonui/dist/js/accordion.js"]
}
```
3. Include FlyonUI JavaScript in HTML
To enable interactive elements, include FlyonUI's JavaScript in your HTML file, right before the closing `