DEV Community

Cover image for FlyonUI - An Open Source Tailwind CSS Component Library is Live 🚀
ThemeSelection for ThemeSelection

Posted on • Updated on • Originally published at flyonui.com

FlyonUI - An Open Source Tailwind CSS Component Library is Live 🚀

Hey Devs! 👋

We’re super excited to announce the launch of FlyonUI—a fully free and open-source Tailwind CSS Components library that we've been hard at work developing.

This library brings together the best of Tailwind CSS with semantic class names and powerful headless JS plugins for a seamless development experience.

And guess what? It's available on GitHub for the community to use, contribute, and improve.

A Little Backstory 💪

Our team has poured time and passion into building FlyonUI, and we're excited to offer it for free!

We’d love for you to try it out and share your feedback via GitHub issues or in the comments. Your input will help us make FlyonUI even better for everyone.


Table of Contents


Overview

FlyonUI Banner

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

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


Enter fullscreen mode Exit fullscreen mode
  1. Include FlyonUI as a plugin in your tailwind.config.js file:


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


Enter fullscreen mode Exit fullscreen mode

This ensures that FlyonUI's styling is applied correctly throughout your project.

If you want to include specific js component:



   module.exports = {
     content: ["./node_modules/flyonui/dist/js/accordion.js"]
   }


Enter fullscreen mode Exit fullscreen mode
  1. Include FlyonUI JavaScript in HTML To enable interactive elements, include FlyonUI's JavaScript in your HTML file, right before the closing </body> tag:


   <script src="../node_modules/flyonui/flyonui.js"></script>


Enter fullscreen mode Exit fullscreen mode

For a single component, use the specific path:



   <script src="../node_modules/flyonui/dist/js/accordion.js"></script>


Enter fullscreen mode Exit fullscreen mode

This script ensures that all FlyonUI interactivity is correctly applied to your elements.

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.

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 78+ components, from basic elements like buttons and cards to more complex third-party integrations.

Explore all components

Component Examples

Accordion Alert Apex Charts
Tailwind CSS Accordion Tailwind CSS Alert Tailwind CSS Apex Charts
Button Card Checkbox
Tailwind CSS Button Tailwind CSS Card Tailwind CSS Checkbox
Dropdown Input Modal
Tailwind CSS Dropdown Tailwind CSS Input Tailwind CSS Modal
Navbar Tabs & Pills Tooltip
Tailwind CSS Navbar Tailwind CSS Tabs & Pills Tailwind CSS Tooltip

Explore all components

Community

Join the FlyonUI community to discuss the library, ask questions, and share your experiences:

Credits

We are grateful for the contributions of the open-source community, particularly:

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

License

FlyonUI is open-source software licensed under the MIT License.

Top comments (12)

Collapse
 
chandra_pantachhetri profile image
Chandra Panta Chhetri

library looks really good! I love headless UI libraries. The DataMap component looks good too, I haven't seen many other libraries do that. Excited for the Figma design so I can use it in my next design! Great work, keep it up :)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

"Most easiest"? Might want to run that through a grammar check 👍

Collapse
 
theme_selection profile image
ThemeSelection

Hey Jon,

Good catch! Thanks for pointing that out; we've corrected it now 😊 We appreciate you taking the time to help improve the post!

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

No problem! There's more than one instance though - looks like you may have missed one.

Collapse
 
devluc profile image
Devluc

Awesome resource for web developers. Great work

Collapse
 
theme_selection profile image
ThemeSelection

Thanks a lot for the appreciation. 🤩
We are going to launch soon on product hunt as well.

Collapse
 
devluc profile image
Devluc

Drop the PH link here if you want to so I can register to be Notified. Also don't forget to DM me on launch day (as backup) so I can stop by to support

Collapse
 
abhidave001 profile image
Abhi

Fabulous...!!

Collapse
 
imananddesigner profile image
Anand Designer

The best Tailwind UI library I've ever seen—every component is sleek, modern, and beautifully crafted.

Collapse
 
alokvishu profile image
Alok Dev

One of the best UI libraries I've ever seen. I plan to use it in my next project. Kudos to the team!

Collapse
 
deepkumbhare85 profile image
Deep kumbhare

Awesome open-source component library. Planning to use it in upcoming projects.

Collapse
 
monab profile image
Mona Brahmakshatriya

It is an excellent Tailwind component library with amazing theme options for web developers.🧑‍💼

Some comments may only be visible to logged-in visitors. Sign in to view all comments.