DEV Community

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

Posted on

🚀 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

DaisyUI Components

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

Flowbite Components

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 🏔️

HyperUI Components

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

shadcn/ui components

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

Tailwind Elements Components

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 🤑

Stargazer Weekly Newsletter

💌 Subscribe

Cheers 🥂
Igor

Top comments (8)

Collapse
 
atinypixel profile image
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

Collapse
 
garrrikkotua profile image
Igor Kotua

Flowrift looks nice!

Thank you for sharing, Azir 😄

Collapse
 
nevodavid profile image
Nevo David

Great list!
Thank you Igor!

Collapse
 
garrrikkotua profile image
Igor Kotua • Edited

Thank you for the kind words, Nevo!

Collapse
 
gyauelvis profile image
Gyau Boahen Elvis

Thank you

Collapse
 
garrrikkotua profile image
Igor Kotua

You are welcome 😀

Collapse
 
sattineez profile image
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 ☺️🙏

Collapse
 
imran_baitham profile image
Imran Baitham

Thanks so much for sharing! 😊🙏 I’d also suggest mentioning bardui.com for beginners to learn and use the components.