Blog Cover

Collection of Beautiful, Responsive Tailwind Component Libraries

Pranav Birajdar

Pranav Birajdar

March 11, 2021

384 💖

Since starting with Tailwind for my styling needs, my workflow has significantly improved since I follow the utility classes Tailwind provides me and everything ends up looking very elegant and clean for the amount of time I actually spend on it.

Some amazing developers have gone a step ahead and built entire component libraries based on the Tailwind classes. I have used a few of them and here's a list of are some of my favorites:

Windmill UI

image

I am slightly biased towards this one since this was the first library that I used on one of my projects.

Pros:
  • Includes a Pure HTML and a React Dashboard page right out of the box
  • Dark Mode using React with a few lines of code
  • Easy escape hatch in-case you wish to make some design changes
  • Accessible out-of-the-box
  • Absolutely free
Cons:
  • I wish it had a catalog of larger everyday webpage components such as a header, navbar, footer, CTA templates to choose from.

Kutty

image

I absolutely adore the Marketing components from Kutty and I have used a few for my personal website that I am working on right now.

Pros:
  • Includes plenty of webpage components like heroes, header, footers, blog list that are missing from Windmill UI
  • Great support for Alpine and Vue JS
  • Accessible out-of-the-box
  • Absolutely free
Cons:
  • Very minimal JS-free components and the JS dependant components are built with Alpine. So slightly difficult learning curve.

Tail-kit

image

I have used bits and parts of this library for a few of the components. They offer over 250 free components and templates, based on Tailwind CSS 2.0. It's all compatible with React, VueJS, and Angular applications.

Pros:
  • Plenty of small and big webpage components. Most from the three that I have used thus far.
  • They have some great templates for landing pages, error pages, and dashboards
  • Accessible out-of-the-box
  • Absolutely free
Cons:
  • None, except that there's a slight learning curve given the huge amount of options.

I will make another post with more interesting libraries, if and when I get a chance to use them!

Get In Touch!

Whether you have an idea for a project or just want to say hi,
feel free to shoot me an email!