Tailgrids Component Library


500+ multipurpose Tailwind CSS UI Components, Blocks, and Templates

Tailgrids Component Library Image 1
Details About Tailgrids Component Library
Key points:
  • Responsive Design
  • Tailwind CSS v3.0+
  • Copy & Paste
  • Figma design file
  • Open Source
  • Documentation
  • Install via npm


500+ Tailwind CSS HTML component library to build modern web applications and landing pages. Get ahead with well-documented Tailgrids with included Figma design file with an open-source option.


Tailgrids offers the following features:

  1. 500+ UI Components for different types of UI
  2. Powered by Alpine.js
  3. Included Figma source file
  4. 12+ ready-to-use example templates
  5. Marketing UI components
  6. Admin & Dashboard UI components
  7. E-Commerce UI Components
  8. Rich Documentation
  9. Premier Support
  10. Free components available

Included Components

Tailgrids include a rich library of UI Components, Blocks, Templates, and UI Kit Elements. Copy-paste to Build UI for Web App, Marketing, E-Commerce, Dashboard, and many more.

  1. Application UI
  2. Blogs
  3. Cards
  4. Contacts
  5. Cookies
  6. Error Pages
  7. Footers
  8. Modals
  9. Navbars
  10. Paginations
  11. Auth/Sign In/Up
  12. Table Grids
  13. Tables

Marketing UI

  1. About
  2. Brands
  3. Call To Actions
  4. Features & Services
  5. Headers & Hero Area
  6. Newsletter Forms
  7. Portfolios
  8. Pricing Tables
  9. Stats
  10. Teams
  11. Testimonials
  12. Videos

Core Components

  1. Accordions
  2. Alerts
  3. Badges
  4. Breadcrumbs
  5. Button Group
  6. Buttons
  7. Checkbox
  8. Dropdown Buttons
  9. Form Elements
  10. List Styles
  11. Page Titles
  12. Progress Bars
  13. Tabs
  14. Toggle And Switch
  15. Tooltips


  1. Checkouts
  2. E-Commerce Footers
  3. E-Commerce Headers
  4. E-Commerce Navbars
  5. Featured Products
  6. Filters
  7. Order Summaries
  8. Product Carousels
  9. Product Categories
  10. Product Details
  11. Product Grids
  12. Promo Banner
  13. Quick Views
  14. Recent Products
  15. Customer Reviews
  16. Shopping Carts
  17. Wishlists


  1. Avatars
  2. Calendars
  3. Charts
  4. Chat Boxes
  5. Chat List
  6. Dashboard Dropdowns
  7. Data Stats
  8. Drawers
  9. Horizontal Menus
  10. Maps
  11. Notifications
  12. Popovers
  13. Profiles
  14. Select Box
  15. Settings Pages
  16. Steps
  17. Table Stacks
  18. Vertical Navbars

Pros and Cons

Pros ✅

  1. Pre-built admin UI screens
  2. Comes with Figma source file
  3. Interactions are handled by Alpine.js
  4. Comes with downloadable offline files along with a one-click copy feature from the website
  5. npm install available

Cons ⛔️

  1. No React and Vue versions are available.

Who is Tailgrids for?

Tailgrids provide an ideal base for developers seeking easy ways to develop HTML-based web applications and landing pages on top of Tailwind CSS. It offers a unique starting point for sweetening their development workflows.

What do people say?

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.

Marko Denic

Developer Advocate and Software Engineer


Can I use TailGrids with commercial projects?

Yes, you can use with commercial/clients/personal projects.

How many commercial project or domains are allowed?

You can use TailGrids for unlimited commercial projects or domains.

Can I crate theme/template based on TailGrids and resell them?

No, you are not allowed to build themes for resell also not allowed any parts with website/page builder or redistribute source files.

Which license type is suitable for me?

Everything explained on pricing tables of each plan, if you are still confused ask us via chat or support ticket. We will get back to you

How I can get future updates?

Yes. You will recieve free updates for lifetime, new components for and updated download files will be automatically available under your account.

Can I upgrade to All-Access after purchasing other plans?

Yes. In this case, you have to contact us via support after purchasing All-Access plan. We will refund your old purchase payment and it has to be within 60days.

What is the meaning of seat?

Seat means how many developers/people gonna use TailGrids to develop web page for end-product, but it doesn't means end-users. There is no limit for end-users or visitors.

When I need team license?

If you are an agency, you may want to share access to multiple team members who may involved with the project. In this case, you must purchase team license so, you can share access with team members.

Does TailGrids comes with design source files?

Yes, we provide complete figma source file. Check the pricing tables, only Professional and All-Access plans holder can access figma files.

Do you provide support?

Yes. Support is provided to all our customers. You can chat us on discord community also can open a support ticket by describing your issue, we will get back to you within 24hrs.

Is TailGrids well-documented?

Indeed. we created entirely separate portal for docs you can access from: tailgrids.com/docs if you find anything that is not available on documentation page. Please, ask on discord or submit a ticket we will get back to you with a solution.

Featured Tailwind Components

Discover the most popular Tailwind CSS ui components and elements. Browse top-notch Tailwind components to enhance your development process.

Preline UI HOT

Open-source set of prebuilt UI components based on the utility-first Tailwind CSS.