Table of contents
- 1. Tail-kit
- 2. Kimia-UI
- 3. Mamba UI
- 4. Meraki UI
- 5. Tailblocks
- 6. Salvia-Kit
- 7. DaisyUI
- 8. Creative Tim Starter Kit - Added on 21/09/2022
- 9. Flowrift - Added on 21/09/2022
- 10. Shuffle - Added on 21/09/2022
- 11. Dev Dojo - Added on 21/09/2022
- 12. Flow Bite - Added on 21/09/2022
- 13. CSS Scan Buttons - Added on 21/09/2022
- 14. Tailwindmasterkit - Added on 21/09/2022
- 15. Kitwind - Added on 21/09/2022
- 16. Ui verse - Added on 13/10/2022
- 17. HyperUI - Added on 09/01/2023
- 18. Tremor - Added on 20/01/2023
- 19. Shadcn/ui - Added on 24/01/2023
- 20. hover.dev - Added on 23/12/2023
- 21. Aceternity UI - Added on 23/12/2023
- 22. Magic UI - Added on 23/12/2023
- 23. Syntax UI - Added on 24/04/2024
- 24. Cult UI - Added on 06/06/2024
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.
23. Syntax UI - Added on 24/04/2024
24. Cult UI - Added on 06/06/2024
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 :)