10 Open Source Libraries for Tailwind CSS Components
Tags: tailwindcss, css, webdev
Published: 2021-10-14 10:12:06

<small>Orginally published at Medium on Feb 8th 2020.</small>

[TailwindCSS](https://tailwindcss.com/) is a revolutionary design framework that has attracted both diehard fans and critics. Fans love its speed, simplicity, and powerful building capabilities. Critics hate its bloated HTML design. Regardless of which side you are on, Tailwind has caused a significant shift in the developer community.

> Building beautiful websites has never been easier.

If you enjoy building web applications with Tailwind, it gets even better when leveraging pre-built components and pages. [Tailwind UI](https://tailwindui.com/) is the (partially paid) masterpiece by the founders of Tailwind. If, however, you are looking for more free alternatives, the Tailwind community has your back. The components and templates below enable you to easily copy and paste the HTML into your own project without any dependencies.

1. [Tail-kit](#1-tailkit)
2. [Tailblocks](#2-tailblocks)
3. [Tailwind Components](#3-tailwind-components)
4. [Tailwind Starter Kit](#4-tailwind-starter-kit)
5. [Kometa UI Kit](#5-kometa-ui-kit)
6. [Themes.dev](#6-themesdev)
7. [Meraki UI Components](#7-meraki-ui-components)
8. [Wicked Blocks](#8-wicked-blocks)
9. [Lofi UI](#9-lofi-ui)
10. [CodePen](#10-codepen)

## 1. Tail-kit

[Over 250 free components](https://www.tailwind-kit.com/) and free templates. For use with plain HTML, React, Vue.js, and Angular web applications.
![Tailkit-demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m45kc3qelb3u763bg5x2.gif)

## 2. Tailblocks

With a drag-and-drop interface, [Tailblocks](https://tailblocks.cc/) provides a unique open source generator for beautiful web pages. Over 60 CSS blocks are ready to use. Fully responsive with dark mode support.
![Tailblocks demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzb486oevsspn8y36e7b.gif)

## 3. Tailwind Components

[A collection](https://tailwindcomponents.com/) of open source components and templates for your project — from small components to complete landing pages.
![Tailwind Components demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dpityvwohtavwtf661u.gif)

## 4. Tailwind Starter Kit

Well-documented and [high-quality components and pages](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation). Support for HTML, React, Vue, and Angular.
![Tailwind Starter Kit demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1s50h83i1u7u1276vnl.gif)

## 5. Kometa UI Kit

[Over 130 sections](https://kitwind.io/products/kometa/), fully responsive, and available in HTML, Vue, and React. You can use them on unlimited personal and commercial projects.
![Kometa UI Kit demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esf5f9b6yd331pfq3y3q.gif)

## 6. Themes.dev

[High-quality, handcrafted themes](https://www.themes.dev/). Landing pages and dashboards for SAAS companies and an overview of the [entire Tailwind color palette](https://www.themes.dev/tailwindcss-colors/).
![Themes.dev demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38ecd5s6zdm31wgzqtrc.gif)

## 7. Meraki UI Components

[A collection](https://merakiui.com/) of responsive components, along with many beautiful cards.
![Meraki UI Components demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vscsmpwlg5e0yb6m4z28.gif)

## 8. Wicked Blocks

A growing [open source collection](https://blocks.wickedtemplates.com/) of layout blocks and components that are ready to copy-paste!
![Wicked Blocks demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g553pegdbslx79bo960k.gif)

## 9. Lofi UI

[Lofi UI](https://lofiui.co/) is a curated collection of snippets from CodePen.
![Lofi UI demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pvg8bdavvtjo0wb2zzr.gif)

## 10. CodePen

Last but not least, search [CodePen](https://codepen.io/search/pens?q=tailwind) yourself!

Many individual contributors are placing a single component on CodePen. This includes [Adam Wathan](https://codepen.io/adamwathan), the founder of Tailwind CSS. A simple search for Tailwind leads to the discovery of wonderful snippets.
![search codepen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0wltl5jxhmb4bsrzmno.gif)

Thanks for reading!