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>
Some people might not agree that I ranked Daisy so low but in my opinion Daisy has some problems:
- 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.
- 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.
- 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>
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>;
)
}
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 (26)
Great content!
What do you think about HeadlessUI?
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.
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍
is there any other tailwind based library that worked with app router or which one will best from the list to use
Thanks for the nice list!
Great suggestion 👍
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
Yup, best by a mile for me.
I myself use shadcn's ui library. It's great!
thank you for sharing.
Wonderful content. Saved!!!
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.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.