The
Easiest
Effortless
Seamless

Tailwind CSS
Components Library

Main Features

All Essentials in One Place

Save countless hours by using FlyonUI’s ready-made components, blocks, and templates,

designed to simplify your workflow and bring your projects to life with ease.

Ready-to-use Tailwind CSS Templates

Pre-built ready-to-use Tailwind CSS Templates to accelerate your project development.
Coming Soon! Prebuilt template

Free Forever

Completely free forever, open-source, and built for the community.
illustration boy

Tailwind CSS Blocks

Kickstart your project with FlyonUI’s wide range of Tailwind CSS blocks and layouts.
Coming Soon! prebuilt blocks
Unlimited Themes
Gradient Background
Unlimited themes

Apply your own design decisions with Unlimited Themes

With FlyonUI colour names, you can achieve Dark Mode and
access a variety of additional themes, all without the need to add any new class names.
Explore Themes

Light

Dark

Gourmet

Corporate

Luxury

Soft

CHAT LIST
  • User Image
    9.00AM 1
  • User Image
    10.00PM 3
  • User Image
    8.30AM
  • User Image
    5.50AM 2
  • User Image
    6.45PM
APPS NOTIFICATION
  • google logo Google
  • twitter logo Twitter
  • linkedin logo Linkedin
  • dribble logo Dribbble
  • behance logo Behance
FlyonUI Themes
View All Themes
Semantic colors

primary

secondary

accent

neutral

base 100

base 200

base 300

content

info

success

warning

error

Components
Gradient Background
Components

78+ Tailwind CSS Components

FlyonUI combines elegant semantic classes with robust JS plugins,

creating a powerful toolkit for building stunning, responsive, and interactive user interfaces with ease.

Stats

FlyonUI Impact

Celebrating the milestones achieved with FlyonUI.
78 + Components
GitHub Stars
NPM Installs
800 + Examples

Reviews

Gradient Background
Reviews

The Wall of Love

Insights from those who’ve experienced FlyonUI.
Obsidian One
Obsidian One
@Obsidian-One

I'm getting a kick out of this. A semantic UI library using a utility CSS library. That's rich. 🤣


That said, anyone who puts effort into something like and open sources it for free this gets a 👍from me. If anything else, non-designer folks like me can use it to learn how stuff is cobbled together to be useful. Thank you.
Chandra Panta Chhetri
Chandra Panta Chhetri
@chandra_pantachhetri
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 :)
GIDEON WANDABI
GIDEON WANDABI
@gg_wandabi
The library is great using it on react. After building i just have to copy flyonui.js to my dist folder update the path in index.html and everything works
Kennedy Gitahi
Kennedy Gitahi
@kengitahi
I have looked at over 100 Component Libraries in the last two weeks, and I have not found one that looks as great and offers as many options as this one. Will definitely be using it in a project I have going on
Madza 👨‍💻⚡
Madza 👨‍💻⚡
@madzadev
This is amazing, congrats on the launch! 🚀🥳
mrinterweb
mrinterweb
@mrinterweb
I love that this is not framework specific and designed for html + css first. This ability to play nice with all frameworks is a standout feature. Not the first framework to do this, but after seeing so many react specific frameworks, i really appreciate this.
Hombre Fatal
Hombre Fatal
@hombre_fatal
The two interactive clusters of component examples on the homepage are really amazing and well thought out. How'd you come up with the idea of having them cascade down from the right side of the webpage above the fold? Never seen that before. The docs have some serious attention to detail.
Francisco Zapata
Francisco Zapata
@drfcozapata

It's AMAZING!!!

I understand that they only incorporate HTML and TailwindCSS, but if they added DataTables they would go to heaven because it does not have the difficulty to customize that other libraries have (such as Vuetify, PrimeVue and others that are very good but have that handicap) since everything is managed with classes of Tailwind and the framework itself.

BRILLIANT.

I've already switched, and as long as I don't need to use datatables, this is my component framework. Blessings to the entire team from Venezuela.
Parlier Thierry 🧪💯
Parlier Thierry 🧪💯
@mrnemesys
🎨 Want to create the perfect look for your app? With FlyonUI, you can easily apply your own design choices! Choose from themes like Light, Dark, Gourmet, Corporate, Luxury, and Soft. Plus, toggle Dark Mode effortlessly! 🌙 Give it a try today!
Get FlyonUI Now

Install FlyonUI

Follow these simple steps to get started with FlyonUI in your project
Get Started
Package Manager: npm / Installation Guide

Free & Open Source

Gradient Background
Free and open-source

Built with Open-Source Built for the Community ❤️

FlyonUI combines Adss the best features of
daisyUI and PrelineJS to provide a robust Tailwind CSS UI kit

We are grateful for the contributions of the open-source community, particularly daisyUI and PrelineJS . These projects form the backbone of FlyonUI, allowing us to build a powerful and user-friendly UI kit.

Special thanks 👍🏼 to:

daisyUI Logo PrelineUI Logo

We welcome contributions from developers worldwide. Together, we can make FlyonUI even better.

Visit our GitHub repository to get involved and be a part of our growing community.

User Avatar
User Avatar
User Avatar
99+