Avatar 1Avatar 2Avatar 3Avatar 4Trusted by thousands worldwide

Tailwind CSS UI Components, Blocks and Templates

Tailwind CSS UI components, blocks, sections, and templates crafted for web apps, marketing, e-commerce, dashboards, and more

Hero
Built with your favorite stack and tools.
Tailwind CSS
Figma
Html
React
Vue
JavaScript
Alpine.js

Trusted by 5000+ individuals & companies of all sizes

Main Features

One destination for every essential you're looking for

Multipurpose, free, and premium Tailwind UI components, blocks, and templates

Feature Image 1

500+ Premium UI blocks

A complete collection of ready-to-use design elements crafted to speed up your workflow.

12+ Ready to use Templates

12+ Ready to use Templates

Launch faster and smarter with templates crafted for modern web and app experiences.

Figma Design System

Figma Design System

Streamline your workflow in Figma with reusable, consistent design components.

100+ free components

100+ free components

Streamline your workflow in Figma with reusable, consistent design components.

Universal framework support

Universal framework support

Streamline your workflow in Figma with reusable, consistent design components.

Core Features

All core essentials to create stunning interfaces faster.

Powerful, ready-to-use components designed & developed to speed up your workflow.

600+ UI Components

600+ UI Components

Beautifully crafted 600+ Tailwind Components for HTML, React, and Vue components. From buttons to testimonials, we've got you covered.

Styled with Tailwind CSS

Styled with Tailwind CSS

Built with the latest Tailwind CSS for a modern, minimal design, ensuring an exceptional development and coding experience.

Light & Dark Themes Available

Light & Dark Themes Available

Every component comes with built-in Light and Dark theme support — easily switch between themes to match user preferences.

Developer Friendly

Developer Friendly

Developer experience is our priority. Our library is built for efficiency, saving development hours while boosting productivity.

Easy to Use

Easy to Use

Experience the simplicity of our copy-paste interface with no complex dependencies. Copy the code snippet and effortlessly paste it into your Tailwind project or start a new one.

Figma Source File

Figma Source File

Get the full Figma source with a complete, ready-to-use design system.

CLI Tool Support

CLI Tool Support

The Tailgrids UI CLI tool helps you quickly scaffold projects and add components to your existing projects.

Refreshing Design

Refreshing Design

Clean, high-quality design that leaves a positive impression. TailGrids follows modern trends for a clear visual experience.

Fully Responsive

Fully Responsive

Fully responsive and compatible with all modern browsers. Every element undergoes thorough cross-testing across major browsers and various mobile screen sizes.

Instant Integration

Build your web app 10x faster with TailGrids components.

All components are fully compatible with HTML, React, and Vue — simply copy, paste, and launch your project instantly.

tailgrids.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
preview

Login to your account

Login to get started and enjoy full access
to all features & functions.

OR

Don't Have an account? Sign Up

Forgot password?
Testimonials

Our Wall of Love - Words from Happy Customers

Trusted by creators, loved by developers, and praised by designers across industries.

Fajar Siddiq

Fajar Siddiq

Serial Entrepreneur, Singapore

TailGrids is such a great help when comes to building landing page and web app UI for Tailwind CSS web projects with just copy-paste method! is really liked the design and it is easy to get started which saves tons of time & money for developers and designers with Figma files & source code!
Marko Denic

Marko Denic

Developer Advocate and Software Engineer

TailGrids comes with all the essential UI components you need to create beautiful websites based on Tailwind CSS. The design consistency & variations of UI components, clean codebase, copy-paste interface, and detailed documentation made this UI library very organized & super easy to use.
Athar Ahmed

Athar Ahmed

Founder, ScrapeOwl and Senior Software Engineer @Aide

Since I like doing engineering parts only, designing and coding landing pages is great blocker for me while I develop MVPs or try to validate a new product idea. TailGrids seems have great collection of UI components that also comes relevant contents and Figma file that I can use to play or create prototype before diving into code.
Ostap Brehin

Ostap Brehin

Fullstack Developer and Building NotionMailer

A landing page is the first thing your customers will see before even trying the project. You want to make sure it looks great, and this is where TailGrids comes to help! It provides a collection of beautiful hand-crafted uniquely-looking components that you can use to build your startup website, web application, or dashboard.
Arnob Mukherjee

Arnob Mukherjee

Founder @Olvy

Seems like an amazing alternative to tailwindui, also the design looks amazing man 🚀
Kamal Hosen

Kamal Hosen

Software Developer @HappyAddons

Having used almost all the Tailwind CSS UI toolkits and resources, I can confidently say that TailGrids is the easiest and most comprehensive Tailwind UI Library with almost all essential Tailwind CSS components you may need to build web UI faster. Specially, code explorer and copy-paste inteface is time-saver. Highly recommended!
Community

Community contributors

Join a community of open-source contributors by tuning in with the Tailgrids React community and become one of the highlighted members

Ava
Ben
Clara
Dan
Ella
Finn
Gina
Hugo
Ivy
Jake
Lia
Mia
Jake
Lia
Mia
Jake
Lia
Mia
Mia
Mia
Mia
Mia
Mia

Community Contributors

Become a member of a community of developers by supporting Tailgrids

Newsletter

Get fresh updates, free resources, exclusive offers, and product news—straight to your inbox.