Free TailwindCSS components to build UI faster

Free TailwindCSS components to build UI faster

ยท

4 min read

As a frontend developer often times we want to just spit out a decently looking UI in a short span of time. The advent of Tailwind CSS has already made our jobs easier but wouldn't it be even better if we could use pre-built good looking components and that too for FREE?

That's right, this is a compiled list of free Tailwind CSS components and templates that you can use directly in your side projects or any project for that matter :)

๐Ÿšจ NOTE: Please save this post as I will be updating the list as and when I stumble upon more free resources ๐Ÿš€.

1. Tail-kit

Tail-kit gives you access to over 250 free components and free templates, based on Tailwind CSS 2.0. It's all compatible with React, VueJS and Angular applications.

Extra: You can even make a request for a component here. Isn't that just amazing ๐Ÿฅณ ?

2. Kimia-UI

Provides fully customizable UI Components compatible with Next.js, Gatsby and create-react-app. No installation needed, Just copy and paste a component you want to use

3. Mamba UI

Mamba UI is a free, open-source collection of beautiful UI elements based on Tailwind CSS that make it easy for anyone to build a website in minutes.

4. Meraki UI

Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.

5. Tailblocks

Ready-to-use Tailwind CSS blocks 60+ Blocks, Responsive, Dark Mode Support, Color Variations

6. Salvia-Kit

Built with Tailwind CSS, they are fully customizable and without external dependencies. Each dashboard has 4 variants. one for create-react-app, Next.js, Vue with vite and Nuxt.

7. DaisyUI

Clean HTML with component classes Customizable and themeable Pure CSS, No dependencies

8. Creative Tim Starter Kit - Added on 21/09/2022

Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular.

9. Flowrift - Added on 21/09/2022

Beautifully designed

Tailwind CSS UI blocks.

view / copy / customize

10. Shuffle - Added on 21/09/2022

Shuffle gives you 6,400+ fully responsive UI components to get you started. You don't have to be a designer to create attractive templates!

11. Dev Dojo - Added on 21/09/2022

A unique collection of Copy & Paste TailwindCSS buttons ๐Ÿ™Œ

12. Flow Bite - Added on 21/09/2022

Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.

13. CSS Scan Buttons - Added on 21/09/2022

Beautiful CSS buttons examples

14. Tailwindmasterkit - Added on 21/09/2022

Handcrafted, professional Tailwind UI components for your next web application. Get beautiful, responsive, professionally developed Tailwind UI components and build your website quicker. Worry less about responsive and beautiful UI, let Tailwind Master Kit handle the complexity

Note: only some components are free but worth checking out

15. Kitwind - Added on 21/09/2022

All the sections are fully responsive and available in HTML, VueJS, and React. You can use them on unlimited personal and commercial projects.

16. Ui verse - Added on 13/10/2022

This is not specifically made in TailwindCSS but it is open-source and free to use. You can convert all of it in tailwind by looking at the CSS hence adding this resource here as it might be useful.

17. HyperUI - Added on 09/01/2023

HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, eCommerce store and much more.

18. Tremor - Added on 20/01/2023

The React library to build dashboards fast.

Tremor is based on real-world situations. Find inspiration for your next dashboard by using our pre-built templates based on our components.

19. Shadcn/ui - Added on 24/01/2023

Beautifully designed components built with Radix UI and Tailwind CSS. Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. And Next.js 13 Ready.

20. hover.dev - Added on 23/12/2023

Animated UI Components for React & Tailwind. Many components in this are paid but they are a good source of inspiration and you can replicate them with little effort.

21. Aceternity UI - Added on 23/12/2023

Copy paste the most trending components and use them in your websites without having to worry about styling and animations.

22. Magic UI - Added on 23/12/2023

All components are paid but they are a good source of inspiration and you can replicate them with some effort.



Thank you, everyone! that is it for now, but I will be updating this list, you can also contribute to this exhaustive list by commenting below or by reaching out to me on Twitter๐Ÿค, and I will add them here with credits :)

Did you find this article valuable?

Support Vikrant Bhat by becoming a sponsor. Any amount is appreciated!

ย