DEV Community

Cover image for Top 5 Tailwind Component Libraries
Apestein
Apestein

Posted on • Updated on

Top 5 Tailwind Component Libraries

Introduction

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>Button</Button>;
    <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
https://twitter.com/Apestein_Dev

Top comments (27)

Collapse
 
eelcoverbrugge profile image
Eelco Verbrugge

What do you think about HeadlessUI?

Collapse
 
apestein profile image
Apestein

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.

Collapse
 
bryan5 profile image
Bryan Quiroz

Great content!

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Collapse
 
mahatohariom profile image
HariomMahato

is there any other tailwind based library that worked with app router or which one will best from the list to use

Collapse
 
ashishk1331 profile image
Ashish Khare😎

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

Collapse
 
getcodescandy profile image
codescandy

thank you for sharing.

Collapse
 
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

Collapse
 
apestein profile image
Apestein

Yup, best by a mile for me.

Collapse
 
femincan profile image
Furkan Emin Can

Thanks for the nice list!

Collapse
 
lico profile image
SeongKuk Han

Great suggestion 👍

Collapse
 
apestein profile image
Apestein

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.

Collapse
 
gedons profile image
Nerdy Gedoni

Wonderful content. Saved!!!

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