Tailwind CSS v4.0 🚀, 10+ Themes 🎨

The
Easiest
Effortless
Seamless

UI Component Library for
Tailwind CSS

FlyonUI is an open-source Tailwind CSS UI components library with semantic classes and powerful JS plugins. Includes blocks, templates, a Figma design system, and more…

Get Started

Badge

Label

New message!

12 unread messages. Tap to see.

BasicFreeFetch project with team.

TODAY'S MEETINGS

08:30
Daily Project Review
Team organization
Privacy
09:00
Sprint Surge
Daily Boost for Agile Progress
+9
Privacy
11:45
Project Status Update
Progress Overview Update
Privacy
06:30
Team Performance
Team Metrics Evaluation
+9
Privacy

Total page views

89,400

21% than last month

Julia stiles shared an earnings report

$24,895

10%

Compared to $84,325 last year

Zipcar

Vuejs, React & HTML

$24,895.65

Bitbank

Sketch, Figma & XD

$8,6500.20

Aviato

HTML & Angular

$1,2450.80

CHAT LIST

Phillip George
Hii samira, thanks for...
9.00AM1
Jaylon Donin
I'll send the texts...
10.00PM3
Tiana Curtis
That's Great!
8.30AM
Zaire Vetrovs
https://www.youtub...
5.50AM2
Kianna Philips
It was awesome.
6.45PM

Main Features

All Essentials in One Place

Save countless hours by using FlyonUI's ready-made Tailwind UI components, blocks, and templates, designed to simplify your workflow and bring your projects to life with ease.

80+

No More Messy HTML

Write fewer class names for cleaner, more readable code. Easily modify them using Tailwind CSS utilities

Tailwind OnlyTailwind + FlyonUI

Semantic Classes

Instead of writing 100 class names,
use semantic class names and modify as needed.

Ready-to-use Tailwind CSS Templates

Pre-built ready-to-use Tailwind CSS Templates to accelerate your project development.

Free Forever

FlyonUI is an open-source Tailwind CSS component library, licensed under MIT.

Tailwind CSS Blocks

Kickstart your project with FlyonUI's wide range of Tailwind CSS blocks and layouts.

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

Phillip George
Hii samira, thanks...
9.00AM1
Jaylon Donin
I'll send the texts...
10.00PM3
Tiana Curtis
That's Great!
8.30AM
Zaire Vetrovs
https://www.youtub...
5.50AM2
Kianna Philips
It was awesome.
6.45PM

APPS NOTIFICATION

Google
Twitter
Linkedin
Dribbble
Behance

FlyonUI Themes

View All Themes

BasicFreeFetch project with team.

Label

Checked

Semantic colors

primary

secondary

accent

neutral

base 100

base 200

base 300

content

info

success

warning

error

Easy Code

Say goodbye to cluttered HTML!

Write cleaner code with semantic classes, and effortlessly tweak them using Tailwind CSS utilities.

See Magic

<div class='flex flex-col rounded-lg bg-white text-base shadow-md sm:max-w-sm'> <div class='flex flex-auto flex-col gap-4 p-6'> <div> <label class='block cursor-pointer p-1 text-sm text-black' for='full-name-label'> Full Name </label> <input type='text' placeholder='Enter name' class='h-9.5 shrink-1 inline-flex w-full cursor-text appearance-none rounded-md border border-black/40 bg-white px-3 text-base text-black focus-within:isolate focus-within:border-violet-500 focus-within:outline-1 focus-within:outline-violet-500' id='full-name-label' /> </div> <div> <label class='block cursor-pointer p-1 text-sm text-black' for='toggle-password-label'> Password </label> <div class='h-9.5 shrink-1 inline-flex w-full cursor-text appearance-none rounded-md border border-black/40 bg-white px-3 text-base text-black focus-within:isolate focus-within:border-violet-500 focus-within:outline-1 focus-within:outline-violet-500'> <input id='toggle-password-label' type='password' placeholder='Enter password' class='peer w-full outline-none' /> <button type='button' data-toggle-password='{ "target": "#toggle-password-label" }' class='block cursor-pointer' aria-label='password toggle' > <span class='icon-[tabler--eye] password-active:block hidden size-5 shrink-0 text-black/80'></span> <span class='icon-[tabler--eye-off] password-active:hidden block size-5 shrink-0 text-black/80'></span> </button> </div> </div> <div class='flex items-center gap-1'> <input type='checkbox' class='size-5 appearance-none rounded-sm border border-black/40 accent-violet-500 checked:appearance-auto' id='remember-me' /> <label class='block cursor-pointer p-1 text-sm text-black' for='remember-me'> Remember me </label> </div> <div class='flex flex-wrap items-start gap-3'> <button class='h-9.5 inline-flex w-full cursor-pointer items-center justify-center gap-x-2 rounded-md border border-violet-500 bg-violet-500 px-4 text-center align-middle text-base font-medium text-violet-50 shadow-lg transition-all duration-200 hover:bg-violet-600 focus-visible:outline-2 focus-visible:outline-violet-100 disabled:pointer-events-none disabled:opacity-50'> Sign In </button> </div> </div> </div>

<div class="card sm:max-w-sm"> <div class="card-body gap-4"> <div> <label class="label-text" for="full-name-label">Full Name</label> <input type="text" placeholder="Enter name" class="input" id="full-name-label" /> </div> <div> <label class="label-text" for="toggle-password-label">Password</label> <div class="input"> <input id="toggle-password-label" type="password" placeholder="Enter password" /> <button type="button" data-toggle-password='{ "target": "#toggle-password-label" }' class="block cursor-pointer" aria-label="password toggle" > <span class="icon-[tabler--eye] text-base-content/80 password-active:block hidden size-5 shrink-0"></span> <span class="icon-[tabler--eye-off] text-base-content/80 password-active:hidden block size-5 shrink-0"></span> </button> </div> </div> <div class="flex items-center gap-1"> <input type="checkbox" class="checkbox checkbox-primary checkbox-sm" id="remember-me" /> <label class="label-text" for="remember-me">Remember me</label> </div> <div class="card-actions"> <button class="btn btn-primary w-full">Sign In</button> </div> </div> </div>

Full Name

Password

Remember me

Components

80+ Tailwind CSS UI Components

FlyonUI combines elegant semantic classes with robust JS plugins, creating a powerful toolkit for building stunning, responsive, and interactive user interfaces with ease.

Accordion

Alert

Avatar

Badge

Button

Card

Input

Join (Group Items)

List Group

Pagination

Switch

Tabs

View All Components

FlyonUI Pro

Explore 500+ Free & Pro Blocks

Quickly build stunning web interfaces - from landing pages and marketing sites to e-commerce and dashboards with unlimited theme options.

Explore FlyonUI Pro

Stats

FlyonUI Impact

Celebrating the milestones achieved with FlyonUI.

0+

Components

0

GitHub Stars

0

NPM Installs

0+

Examples

Reviews

The Wall of Love

Insights from those who've experienced FlyonUI.

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.

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.

Parlier Thierry 🧪💯

@mrnemesys

Twitter

🎨 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!

Chandra Panta Chhetri

@chandra_pantachhetri

Dev.to

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 :)

Madza 👨‍💻⚡

@madzadev

Twitter

This is amazing, congrats on the launch! 🚀🥳

Hombre Fatal

@hombre_fatal

Hacker News

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.

GIDEON WANDABI

@gg_wandabi

Twitter

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

@kengitahi

Dev.to

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

Francisco Zapata

@drfcozapata

Product Hunt

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.

Trusted By

Featured In

We have been proudly featured on renowned platforms.

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

Licensed under MIT

Built with Open-Source Built for the Community

FlyonUI combines 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:

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.

99+

Support FlyonUI

TheEasiestEffortlessSeamlessUI Component Library forTailwind CSS

All Essentials in One Place

Free Tailwind UI Components & Examples

Universal Framework Compatibility

Unstyled & Accessible Plugins

No More Messy HTML

Semantic Classes

Ready-to-use Tailwind CSS Templates

Free Forever

Tailwind CSS Blocks

Apply your own design decisions with, Unlimited Themes

Say goodbye to cluttered HTML!

80+ Tailwind CSS UI Components

Accordion

Alert

Avatar

Badge

Button

Card

Input

Join (Group Items)

List Group

Pagination

Switch

Tabs

Explore 500+ Free & Pro Blocks

FlyonUI Impact

0+

0

0

0+

The Wall of Love

Obsidian One

mrinterweb

Parlier Thierry 🧪💯

Chandra Panta Chhetri

Madza 👨‍💻⚡

Hombre Fatal

GIDEON WANDABI

Kennedy Gitahi

Francisco Zapata

Featured In

Install FlyonUI

Built with Open-Source Built for the Community

Special thanks 👍🏼 to:

The
Easiest
Effortless
Seamless

UI Component Library for
Tailwind CSS