5 places to get pre-crafted Tailwind CSS components for free

Introduction

I've been using Tailwind CSS pretty heavily in the last few months. I've been using it both at work and at home on personal projects, most recently when I created my Dev.to powered personal website.

One of the best things about using Tailwind CSS to style your application is the large variety of premade components scattered across the web. Need a design for a form? Chances are a designer, likely more skilled than yourself (in my case anyway), has already created one that you can just copy into your app - no extra dependencies, no modifying existing functionality.

I intend for this article to be a living list that I can update each time I find a new high-quality Tailwind CSS component supplier. Most of the websites listed below I've accidentally stumbled onto so this article will help me find them in the future. I've provided a summary for each website to highlight my favourite components both for you and so I know for the future!

Sites you should check out 🤩

Below, I have selected five websites that, to my knowledge, provide the highest quality components available online - completely for free.

1. Tailblocks.

   • Contains over 60 components.
   • Each component comes with dark mode, responsive sizing and colour variants.
   • All the components are high quality. In fact, the website itself provides a great user experience. You can select the emphasis colour and navigate through all the components using the arrow keys on your keyboard.

2. Tailwind Components.

   • Components made by the community.
   • The quality is hit and miss but it's good to check on when searching for a component as you never know what will be added.
   • Does contain some paid "premium" components but these are mainly page layouts - not the components themselves.

3. Meraki UI Components.

   • Meraki contains 49 components.
   • Although they supply a relatively small amount of components, I especially like their design of components that are half image, half content.

4. Tailwind Kit.

   • Tailwind Kit contains over 200 components.
   • Originally announced on Dev.to earlier this year by a French developer named Charlie.
   • There is the ability to request components based on existing designs from places like Dribbble.

5. Tailwind Toolbox.

   • More components made by the community. Additionally has templates, builder kits, generators, plugins and useful tools for use with Tailwind projects.
   • Can suggest components to add to the site.

Bonus

Bit of a half baked bonus...

1. Tailwind UI - from the creators of TailwindCSS.
   • This site contains over 300 of the most polished pre-made components around - they're made by Tailwind experts.
   • The few free components they supply look incredible. However, only a few are free and the rest are part of a paid offering. The price for full access is over $150, likely too much for anyone but serious frontend developers who use Tailwind CSS at work every day. If you purchase access to the library, they promise more components every month until they run out of ideas.
   • Personally, I'm tempted. If I can justify the cost in the future (i.e. use Tailwind CSS more at work) I'd 💯 purchase access to the library. It would take my website designs to the next level without having to invest hours of time fiddling with CSS styling.

Final words

These are just a few places that you can get premade Tailwind CSS components from. I'll keep adding more as and when I find them!

If you know another source of components, drop them in a comment and I'll add them to the list!

Liked this article? Hit the like button!

Thanks for reading!