🚀 5 open-source copy and paste Tailwind CSS 💨component libraries YOU HAVE to try in 2023 🔥

I love Tailwind CSS. For me it's impossible to develop UIs using something different. It just doesn't work.

The best part of Tailwind CSS is that it allows to collocate JS, HTML and CSS in one file. And this unique feature makes sharing Tailwind components a breeze.

I have collected a list of 5 libraries with beautifully crafted Tailwind CSS components which you can copy-paste right into your code, for free ✨

Check them out ⬇️

1. DaisyUI

• 53 components for actions, data display, data input, layout, navigation and even mockups 😮
• Easily customizable components and style system
• Custom themes and theme generator

Find components here:
https://daisyui.com/

---

2. Flowbite

• 330 free and premium components for tables, footers, CTAs, pricing, FAQ and more
• Standalone libs for React, Vue and other frameworks which help to implement interactivity 🎭
• 460+ SVG and JSX icons

Find components here:
https://flowbite.com/

---

3. HyperUI

• Components for Application UI, Marketing websites and eCommerce
• Out-of-the-box responsiveness, dark mode and support for Alpine.js 🏔️

Find components here:
https://www.hyperui.dev/

---

4. shadcn/ui

My favorite one 🤗

• 40+ accessible and pixel-perfect components for React, Next.js and Remix
• Easily customizable themes and styles
• Handy CLI 🤌, out-of-the-box dark mode and more

Find components here:
https://ui.shadcn.com/

---

5. Tailwind Elements

• 500+ Material UI style components build with Tailwind CSS 😮
• Compatible with any framework + standalone React lib
• Fully open-source, support for themes and dark mode

Find components here:
https://tailwind-elements.com/

---

That's a wrap!

If you like content like this, checkout my weekly newsletter where I share learnings building open-source products and trying to make money with them 🤑

💌 Subscribe

Cheers 🥂
Igor

Comments

[Aziz Kaukawala]

Discovered shadcn/ui few weeks ago & I'm so amazed to use it! Thanks Igor!

Here are few more:

• Flowrift: A library filled with Tailwind CSS UI blocks, components & templates. Browse an ever-growing UI kit inside a highly optimized app. View / copy / customize.
• Collection of Tailwind UI & other resources: 😎 Awesome things related to Tailwind CSS

Happy Coding

[Igor Kotua]

Flowrift looks nice!

Thank you for sharing, Azir 😄

[Nevo David]

Great list!
Thank you Igor!

[Igor Kotua]

Thank you for the kind words, Nevo!

[Gyau Boahen Elvis]

Thank you

[Igor Kotua]

You are welcome 😀

[Sattineez_SSC]

I need to try it out flowbite and tailwind elements. For a beginner having this templates are a must (when I'm learning something I like to have it open on a tab and code along)😅

Thank you so much for sharing ☺️🙏