DEV Community

Cover image for Top 5 Tailwind Component Libraries

Posted on • Updated on

Top 5 Tailwind Component Libraries


Why might you want to use a tailwind based component library instead of a something like MUI, Chakra UI, and Mantine? If you are using tailwind, it is best to use a tailwind based component library where you can customize the components with tailwind directly.

5. DaisyUI

Daisy gives you special classes like "btn", "card", etc. These special classes are a combination of other tailwind utility classes. These classes have low specificity so you can easily override them like this:

<button class="btn bg-blue-500">Default</button>
Enter fullscreen mode Exit fullscreen mode

Some people might not agree that I ranked Daisy so low but in my opinion Daisy has some problems:

  1. It does not look professional, the colors are too flamboyant, can you customize it to be more professional? Sure. But it's not professional looking right out the box.
  2. It abstracts how components are created. Basically, when you use the special classes like "btn", you have no idea which tailwind utility classes they are composed of. This is not ideal for learning and customizing, therefore I prefer none-abstracting component libraries.
  3. Components are pure html/css. This just means daisy components are limited in what they can do. Components with Javascript are much more powerful by comparison.

4. Flowbite

Important note, Flowbite has two version, regular Flowbite and Flowbite React. I will only be talking about regular Flowbite and not Flowbite react as I think it's not good. Flowbite is a copy and paste library, meaning you don't need to install anything, like this:

<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>
Enter fullscreen mode Exit fullscreen mode

Problem as you can see is that it doesn't support React. So you will need to change "class" to "className" with every paste. Also, it's another pure html/css component library.

3. WindUI

Like Flowbite but better. This component library does support React so just copy and paste. It also looks much more aesthetic in my opinion.

2. Material Tailwind

Very slick and professional looking component library. Unlike the others component libraries before, it does have Javascript and is more powerful in terms of what it can do.

import { Button } from "@material-tailwind/react";

export default function Example() {
  return (
    <Button size="sm" className="rounded-lg">Button</Button>;
Enter fullscreen mode Exit fullscreen mode

And as you can see, you can easily customize the component by writing tailwind utility classes directly. The only "Con" left is abstraction. You cannot see how the component was created and with what tailwind classes.

1. shadcn/ui

A copy and paste component library. Similar to Material Tailwind except with zero abstraction. You can see all the code making up a component and see all the associated CSS. Fully and easily customize all parts of the components. The only possible "Con" is that it's less beginner friendly. Because it gives you complete low level control it might be more intimating for less experienced users.

Honorable Mention: TailwindUI

Official component library from Tailwind Labs. Very good, but is 300$.

PS: Follow me on Twitter for tech hot takes

Top comments (20)

bryan5 profile image
Bryan Quiroz

Great content!

lico profile image
SeongKuk Han

Great suggestion 👍

fruntend profile image

Сongratulations 🥳! Your article hit the top posts for the week -
Keep it up 👍

artu_hnrq profile image
Arthur Henrique

Shadcn/ui is my way to go nowadays!

It's a good path for those who want to have curated components ready to use, but also wants to learn a good manner to implement its own library

apestein profile image

Yup, best by a mile for me.

femincan profile image
Furkan Emin Can

Thanks for the nice list!

hugekontrast profile image
Ashish Khare😎

I myself use shadcn's ui library. It's great!

getcodescandy profile image

thank you for sharing.

eelcoverbrugge profile image
Eelco Verbrugge

What do you think about HeadlessUI?

apestein profile image

I only consider styled component libraries for this post. HeadlessUI is good, also made by Tailwind Labs, but it has few components and you have to style it yourself.

apestein profile image

Wow, my first "viral" post. Really didn't expect this post to get so much attention. Much appreciated, please follow me if you're interested in webdev. Specifically with Javascript + React.

gedons profile image
Nerdy Gedoni

Wonderful content. Saved!!!

realfakenerd profile image
Lucas A. Ouverney

I'm building one library.
It's been built using the Material Design 3.

Tail Material Design

jdtjenkins profile image

For Svelte, Skeleton is amazing

azofai profile image
Henry Ramirez
ducdaoo profile image
Duc Dao

shadcn/ui +1

sophy profile image
Sophy Prak

I am fan #Flowbite

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