Tailwind CSS: 15 Component Libraries & UI Kits

1

Tailwind UI

Tailwind UI has over 500 components in total; the documentation has component code for React, Vue, and raw HTML. The project has over 61,000 stars on GitHub and gets around 4 million weekly downloads on npm. *

#Design Tools #UI Design #Components Library 207 social mentions

2

DaisyUI

This is quite an interesting addition to this list. You'll first notice that daisyUI uses a custom - simpler - syntax for its components. In fact, whereas you'd need to write several utilities to style a button with raw Tailwind - daisyUI does it with a single "btn" tag.

#Design Tools #User Experience #Developer Tools 137 social mentions

3

Mamba UI

In terms of individual components, Mamba UI has exceptional choices. Article cards, loading bars, header sections, statistics. Even more intricate elements like timelines, news sections, and gallery displays. And it's entirely free.

#Design Tools #UI Design #Components Library 2 social mentions

4

Headless UI

Headless UI is what you want to use if you're looking to build interactive apps right from the start, with the ability to control component logic directly through the library rather than writing all the code yourself.

#Design Tools #UI Design #Components Library 28 social mentions

5

TW Elements

I think Tailwind Elements strives for a fairly minimal look and feel. The documentation shows you how to get it going with npm, or you can use the CDN also to get a quick look at how the kit works in practice. Sadly, there don't seem to be any components pre-written for frameworks like React, but it can be installed as a separate library for your project.

#Design Tools #UI Design #Components Library 11 social mentions

6

Xtend UI

Xtend UI is an excellent starting kit if you love the idea of using Tailwind CSS together with vanilla JavaScript. The components in this kit are amplified with various effects (animations, transitions) and are ideal for modern web projects.

#Front End Framework #JavaScript #Tailwind Css 1 social mentions

7

FlowBite

Flowbite has over 450 components; the documentation has component code for HTML with options to install as a library for the most popular frameworks. The project has over 2,800 stars on GitHub and gets around 50,000 weekly downloads on npm.

#Design Tools #Developer Tools #Web App

8

Tailwind UI Kit

#Design Tools #UI Design #Components Library

9

Meraki UI

First impressions are always important, and Meraki UI is as clean as they come. The components in this library are optimized for responsive design and native RTL integration.

#Design Tools #UI Design #Componens Library

10

Tailblocks

HyperUI is an open-source project provided to the Tailwind community by Mark Mead. It is practically the same exact concept as Tailblocks. You can pick and choose from 30~ different component categories. And, each category includes anywhere from 3 to 10 different styles for the given component.

#Design Tools #UI Design #Components Library 2 social mentions

11

HyperUI

HyperUI is an open-source project provided to the Tailwind community by Mark Mead. It is practically the same exact concept as Tailblocks. You can pick and choose from 30~ different component categories. And, each category includes anywhere from 3 to 10 different styles for the given component.

#Design Tools #UI Design #Components Library

12

Kimia UI

Kimia UI has over 30 components, not including custom themes; the documentation has component code JSX (compatible with Next, React, Remix, and similar frameworks). The project has over 300 stars on GitHub.

#Design Tools #UI Design #Componens Library

13

Tailwind Starter Kit

You need to set up a Tailwind CSS project to use Tailwind Starter Kit you can also use it for an existing Tailwind CSS project. Tailwind Starter Kit is all based on Tailwind CSS classes, and there is no complex setup for using it you just need to set up a new Tailwind CSS project and then copy/paste the component from Tailwind Starter Kit documentation into your project.

#Developer Tools #Design Tools #CSS Framework

14

Material Tailwind

Material Tailwind is exactly that. An implementation of the Material Design based on the Tailwind CSS structure. For the time being, coded components are available for React only. However, the team has stated that more frameworks will follow.

#Web App #Design Tools #Developer Tools 6 social mentions

15

Konsta UI

The author of Konsta UI has emphasized that this library would work best to be used alongside Ionic or Framework7. So, in a sense, you can use this library for both hybrid projects, but also Web Native applications.

#Design Tools #UI Design #Components Library 4 social mentions

16

Preline UI

Preline UI is a freshly released UI component library on top of Tailwind CSS. It's unclear whether the promotion was part of the marketing strategy for this library, but I've seen it trending on Twitter, and many major publishers also picked up on it. So, let's dig a little deeper.

#Design Tools #UI Design #Components Library 7 social mentions