TailGrids, ready made UI blocks for Tailwind CSS

Q: How do I install components from the command line?

The current package is @tailgrids/cli, run through npx. The older entry named tailgrids is marked deprecated in the npm registry and should not be used. The free tier's source lives in the TailGrids repository, and the full block list with current prices is on the project site.

TailGrids, ready made UI blocks for Tailwind CSS

TailGrids is a collection of ready made interface sections written in Tailwind CSS classes: page headers, pricing tables, feature grids, contact forms, and dashboards. You copy the code into your project and edit it rather than installing a dependency. Part of the library is free under MIT, the rest sold as a one off purchase with lifetime access.

A block is not a component

This distinction organises the whole category and is worth understanding before choosing a tool, because it determines what a given library is good for.

A component library gives you a button, a checkbox, and a dialog, the elements you build an interface from. A block library gives you a finished section: an entire page header with a title, description, two buttons, and an image, composed and aligned. Those are two different levels solving two different problems.

Blocks save time where layout is predictable and repetitive, meaning sales pages, pricing tables, and testimonial sections. They do not save time inside an application, where every screen differs and the value lies in component behaviour rather than in arrangement.

The practical consequence is that TailGrids compares sensibly against other block collections rather than against behaviour libraries. If you want an accessible dropdown with keyboard handling, you need something from the Headless UI family, not a set of sections.

Distribution model and licensing

You copy the code into your project. There is no dependency you update with a command, so fixes and new block versions do not arrive on their own. It is the same model you know from shadcn/ui, except that there you copy behaviour and here you copy layout.

The free tier ships under MIT, so commercial use costs nothing and carries no obligation to place a link in your footer. It covers core components plus blocks across several categories: ten application, fourteen marketing, twenty e-commerce, thirteen dashboard, and thirteen AI application blocks.

Version 3 added a command line tool that inserts a chosen element into your project instead of making you paste code from the website. Watch the package name, because the old one misleads: tailgrids in the npm registry is marked deprecated, and the current package is @tailgrids/cli.

Code

Bash

npx @tailgrids/cli add hero-section

Pricing

Plan	Price	Includes
Essentials	free, MIT	core components and blocks across five categories
All-Access	199 USD one off	every paid block, ready made templates, email support
All-Access for teams	349 USD one off	the same for five people plus the Figma design system file

Three things are worth knowing before buying. Payment is one off and includes lifetime access with updates, so there is no subscription. The Figma design file sits in the team plan alone, which surprises people who buy the single user version precisely for it. Prices are periodically discounted against base rates, so check the current figure on the site before treating these amounts as final.

TailGrids against the alternatives

Feature	TailGrids	Flowbite	daisyUI	Magic UI
Content type	finished sections	components and sections	component styles	animated sections
Free tier	yes, MIT	yes, partial	yes, everything	yes, partial
Paid tier	one off	one off	none	one off
How you use it	copied code or CLI	package or copying	package with a plugin	copied code
Figma file	yes, in the team plan	separately	none	none
Main use	sales pages	applications and sites	quick prototypes	sales pages

The choice depends on what you are shortest of. If it is time to compose sections, TailGrids or Flowbite deliver finished arrangements. If it is consistency across an existing project, daisyUI works better, since it adds named component classes rather than whole sections. If it is visual impact on a product page, reach for a collection built around animation.

Component categories

Hero Sections

Hero sections are the first sections that users see. TailGrids offers dozens of variants.

Code

HTML

<!-- Hero with image and CTA -->
<section class="bg-white py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full px-4 lg:w-1/2">
        <div class="text-center lg:text-left mb-12 lg:mb-0">
          <span class="mb-4 inline-block rounded-full bg-primary/10 px-4 py-2 text-sm font-semibold text-primary">
            New Version Released
          </span>
          <h1 class="mb-4 text-4xl font-bold leading-tight text-dark sm:text-5xl lg:text-[50px] xl:text-[58px]">
            Build Your Next
            <span class="text-primary">SaaS Product</span>
            Faster
          </h1>
          <p class="mb-8 max-w-[500px] text-lg text-body-color lg:max-w-[450px]">
            Launch faster with pre-built components and templates.
            Save weeks of development time.
          </p>
          <div class="flex flex-wrap items-center justify-center lg:justify-start gap-4">
            <a href="#" class="inline-flex items-center justify-center rounded-lg bg-primary px-8 py-4 text-base font-semibold text-white shadow-md hover:bg-primary/90 transition duration-300">
              Get Started Free
              <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
              </svg>
            </a>
            <a href="#" class="inline-flex items-center justify-center rounded-lg border border-stroke px-8 py-4 text-base font-semibold text-dark hover:bg-gray-50 transition duration-300">
              <svg class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z"/>
              </svg>
              Watch Demo
            </a>
          </div>
          <div class="mt-10 flex items-center justify-center lg:justify-start gap-6">
            <div class="flex -space-x-3">
              <img src="user1.jpg" alt="user" class="w-10 h-10 rounded-full border-2 border-white" />
              <img src="user2.jpg" alt="user" class="w-10 h-10 rounded-full border-2 border-white" />
              <img src="user3.jpg" alt="user" class="w-10 h-10 rounded-full border-2 border-white" />
            </div>
            <div>
              <p class="text-sm text-body-color">
                <span class="font-semibold text-dark">5,000+</span> happy customers
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full px-4 lg:w-1/2">
        <div class="relative">
          <img
            src="hero-image.svg"
            alt="hero"
            class="w-full max-w-[600px] mx-auto drop-shadow-2xl"
          />
          <div class="absolute -bottom-8 -left-8 hidden lg:block">
            <div class="rounded-xl bg-white p-4 shadow-lg">
              <div class="flex items-center gap-3">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-green-500/10">
                  <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
                <div>
                  <p class="text-sm font-semibold text-dark">Setup Complete</p>
                  <p class="text-xs text-body-color">Ready to go!</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing tables

Pricing tables are a key element of any SaaS website.

Code

HTML

<!-- Pricing Section -->
<section class="bg-white py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <span class="mb-4 block text-lg font-semibold text-primary">
        Pricing
      </span>
      <h2 class="mb-4 text-3xl font-bold text-dark sm:text-4xl md:text-[42px]">
        Simple, Transparent Pricing
      </h2>
      <p class="mx-auto max-w-[500px] text-lg text-body-color">
        Choose the plan that fits your needs. No hidden fees.
      </p>
    </div>

    <div class="flex flex-wrap justify-center -mx-4">
      <!-- Free Plan -->
      <div class="w-full px-4 md:w-1/2 lg:w-1/3">
        <div class="relative mb-10 rounded-xl bg-white px-8 py-10 shadow-pricing border border-stroke hover:border-primary transition duration-300">
          <span class="mb-4 block text-lg font-semibold text-primary">
            Starter
          </span>
          <h2 class="mb-5 text-[42px] font-bold text-dark">
            $0
            <span class="text-base font-medium text-body-color">/ month</span>
          </h2>
          <p class="mb-8 border-b border-stroke pb-8 text-base text-body-color">
            Perfect for trying out our platform.
          </p>
          <div class="mb-9 flex flex-col gap-4">
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              1 User
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              50 Components
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Community Support
            </p>
          </div>
          <a href="#" class="block w-full rounded-lg border border-stroke bg-transparent p-4 text-center text-base font-semibold text-dark transition hover:bg-gray-50">
            Get Started Free
          </a>
        </div>
      </div>

      <!-- Pro Plan (Recommended) -->
      <div class="w-full px-4 md:w-1/2 lg:w-1/3">
        <div class="relative mb-10 rounded-xl bg-primary px-8 py-10 shadow-pricing">
          <div class="absolute -top-4 right-8">
            <span class="inline-block rounded-full bg-white px-4 py-1 text-sm font-semibold text-primary shadow-md">
              Most Popular
            </span>
          </div>
          <span class="mb-4 block text-lg font-semibold text-white/80">
            Professional
          </span>
          <h2 class="mb-5 text-[42px] font-bold text-white">
            $49
            <span class="text-base font-medium text-white/70">/ year</span>
          </h2>
          <p class="mb-8 border-b border-white/20 pb-8 text-base text-white/80">
            Perfect for personal site or client project.
          </p>
          <div class="mb-9 flex flex-col gap-4">
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              1 User
            </p>
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              All 500+ Components
            </p>
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Lifetime Access
            </p>
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Priority Support
            </p>
          </div>
          <a href="#" class="block w-full rounded-lg bg-white p-4 text-center text-base font-semibold text-primary transition hover:bg-white/90">
            Choose Professional
          </a>
        </div>
      </div>

      <!-- Business Plan -->
      <div class="w-full px-4 md:w-1/2 lg:w-1/3">
        <div class="relative mb-10 rounded-xl bg-white px-8 py-10 shadow-pricing border border-stroke hover:border-primary transition duration-300">
          <span class="mb-4 block text-lg font-semibold text-primary">
            All Access
          </span>
          <h2 class="mb-5 text-[42px] font-bold text-dark">
            $99
            <span class="text-base font-medium text-body-color">/ year</span>
          </h2>
          <p class="mb-8 border-b border-stroke pb-8 text-base text-body-color">
            Everything you need for your business.
          </p>
          <div class="mb-9 flex flex-col gap-4">
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              5 Users
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              All Components + Templates
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Figma Files Included
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Dedicated Support
            </p>
          </div>
          <a href="#" class="block w-full rounded-lg border border-primary bg-transparent p-4 text-center text-base font-semibold text-primary transition hover:bg-primary hover:text-white">
            Choose All Access
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Features grid

Features sections showcase the key capabilities of a product.

Code

HTML

<!-- Features Grid -->
<section class="bg-gray-50 py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <span class="mb-4 block text-lg font-semibold text-primary">
        Features
      </span>
      <h2 class="mb-4 text-3xl font-bold text-dark sm:text-4xl md:text-[42px]">
        Everything You Need
      </h2>
      <p class="mx-auto max-w-[500px] text-lg text-body-color">
        Powerful features to help you build amazing products.
      </p>
    </div>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      <!-- Feature 1 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Lightning Fast
        </h3>
        <p class="text-body-color leading-relaxed">
          Optimized for performance. Your website will load in milliseconds,
          providing the best user experience.
        </p>
      </div>

      <!-- Feature 2 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Fully Responsive
        </h3>
        <p class="text-body-color leading-relaxed">
          Every component is designed mobile-first and works perfectly
          on all screen sizes and devices.
        </p>
      </div>

      <!-- Feature 3 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Clean Code
        </h3>
        <p class="text-body-color leading-relaxed">
          Well-structured, semantic HTML with Tailwind CSS.
          Easy to understand and customize.
        </p>
      </div>

      <!-- Feature 4 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          500+ Components
        </h3>
        <p class="text-body-color leading-relaxed">
          Massive library of UI components covering every use case
          for modern web applications.
        </p>
      </div>

      <!-- Feature 5 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Easy Customization
        </h3>
        <p class="text-body-color leading-relaxed">
          Customize colors, fonts, and styles easily with Tailwind CSS
          configuration and utilities.
        </p>
      </div>

      <!-- Feature 6 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Regular Updates
        </h3>
        <p class="text-body-color leading-relaxed">
          New components and features added regularly.
          Stay up-to-date with the latest design trends.
        </p>
      </div>
    </div>
  </div>
</section>

Navigation / Header

Code

HTML

<!-- Sticky Header with Dropdown -->
<header class="sticky top-0 z-50 bg-white shadow-sm">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between py-4">
      <!-- Logo -->
      <a href="/" class="flex items-center">
        <img src="logo.svg" alt="Logo" class="h-8" />
      </a>

      <!-- Desktop Navigation -->
      <nav class="hidden lg:flex items-center gap-8">
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Home
        </a>
        <div class="relative group">
          <button class="flex items-center gap-1 text-base font-medium text-dark hover:text-primary transition">
            Products
            <svg class="w-4 h-4 transition group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
          <!-- Dropdown -->
          <div class="absolute left-0 top-full pt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <div class="w-60 rounded-lg bg-white p-4 shadow-lg border border-stroke">
              <a href="#" class="block rounded-md px-4 py-2 text-sm text-dark hover:bg-gray-50">
                Components
              </a>
              <a href="#" class="block rounded-md px-4 py-2 text-sm text-dark hover:bg-gray-50">
                Templates
              </a>
              <a href="#" class="block rounded-md px-4 py-2 text-sm text-dark hover:bg-gray-50">
                Figma Files
              </a>
            </div>
          </div>
        </div>
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Pricing
        </a>
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Blog
        </a>
      </nav>

      <!-- CTA Buttons -->
      <div class="hidden lg:flex items-center gap-4">
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Sign In
        </a>
        <a href="#" class="rounded-lg bg-primary px-6 py-2.5 text-base font-medium text-white hover:bg-primary/90 transition">
          Get Started
        </a>
      </div>

      <!-- Mobile Menu Button -->
      <button class="lg:hidden p-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</header>

Testimonials

Code

HTML

<!-- Testimonials Section -->
<section class="bg-white py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <span class="mb-4 block text-lg font-semibold text-primary">
        Testimonials
      </span>
      <h2 class="mb-4 text-3xl font-bold text-dark sm:text-4xl">
        What Our Customers Say
      </h2>
    </div>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      <!-- Testimonial Card -->
      <div class="rounded-xl bg-gray-50 p-8">
        <div class="mb-6 flex items-center">
          <img src="user.jpg" alt="User" class="w-14 h-14 rounded-full mr-4" />
          <div>
            <h4 class="text-lg font-semibold text-dark">John Doe</h4>
            <p class="text-sm text-body-color">CEO at Company</p>
          </div>
        </div>
        <p class="text-body-color leading-relaxed mb-6">
          "TailGrids has saved us countless hours of development time.
          The components are beautiful and well-documented."
        </p>
        <div class="flex items-center gap-1 text-yellow-400">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
            <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
          </svg>
          <!-- Repeat stars -->
        </div>
      </div>
      <!-- More testimonial cards... -->
    </div>
  </div>
</section>

Framework versions

React Components

TScomponents/Hero.tsx

TypeScript

// components/Hero.tsx
import React from 'react'

interface HeroProps {
  title: string
  subtitle: string
  ctaText: string
  ctaLink: string
}

export function Hero({ title, subtitle, ctaText, ctaLink }: HeroProps) {
  return (
    <section className="bg-white py-20 lg:py-[120px]">
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto">
          <h1 className="mb-4 text-4xl font-bold text-dark sm:text-5xl lg:text-6xl">
            {title}
          </h1>
          <p className="mb-8 text-lg text-body-color">
            {subtitle}
          </p>
          <a
            href={ctaLink}
            className="inline-flex items-center rounded-lg bg-primary px-8 py-4 text-base font-semibold text-white hover:bg-primary/90 transition"
          >
            {ctaText}
          </a>
        </div>
      </div>
    </section>
  )
}

Vue Components

components/PricingCard.vue

VUE

<!-- components/PricingCard.vue -->
<template>
  <div
    class="rounded-xl bg-white px-8 py-10 shadow-pricing border border-stroke hover:border-primary transition"
    :class="{ 'bg-primary': featured }"
  >
    <span class="mb-4 block text-lg font-semibold" :class="featured ? 'text-white/80' : 'text-primary'">
      {{ plan }}
    </span>
    <h2 class="mb-5 text-[42px] font-bold" :class="featured ? 'text-white' : 'text-dark'">
      ${{ price }}
      <span class="text-base font-medium" :class="featured ? 'text-white/70' : 'text-body-color'">
        / {{ period }}
      </span>
    </h2>
    <ul class="mb-9 flex flex-col gap-4">
      <li
        v-for="feature in features"
        :key="feature"
        class="flex items-center text-base"
        :class="featured ? 'text-white' : 'text-body-color'"
      >
        <CheckIcon :class="featured ? 'text-white' : 'text-primary'" />
        {{ feature }}
      </li>
    </ul>
    <button
      class="block w-full rounded-lg p-4 text-center font-semibold transition"
      :class="featured ? 'bg-white text-primary hover:bg-white/90' : 'border border-primary text-primary hover:bg-primary hover:text-white'"
    >
      {{ ctaText }}
    </button>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  plan: string
  price: number
  period: string
  features: string[]
  ctaText: string
  featured?: boolean
}>()
</script>

Project integration

Next.js setup

Code

Bash

# 1. Create a Next.js project with Tailwind
npx create-next-app@latest my-app --typescript --tailwind
cd my-app

# 2. Copy TailGrids components to src/components/
# 3. Adjust tailwind.config.ts

TStailwind.config.ts

TypeScript

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        dark: '#1E293B',
        'body-color': '#64748B',
        stroke: '#E2E8F0',
      },
      boxShadow: {
        pricing: '0 5px 20px 0 rgba(0, 0, 0, 0.05)',
      },
    },
  },
  plugins: [],
}

export default config

Color customization

TStailwind.config.ts

TypeScript

// tailwind.config.ts - Custom color scheme
const config: Config = {
  theme: {
    extend: {
      colors: {
        // Change primary to your brand color
        primary: {
          DEFAULT: '#6366F1', // Indigo
          50: '#EEF2FF',
          100: '#E0E7FF',
          500: '#6366F1',
          600: '#4F46E5',
          700: '#4338CA',
        },
        // Custom dark shades
        dark: {
          DEFAULT: '#0F172A',
          50: '#1E293B',
          100: '#334155',
        },
      },
    },
  },
}

Full list of component categories

TailGrids offers components in the following categories:

Layout & Structure

Headers/Navbars (25+ variants)
Footers (20+ variants)
Sidebars (15+ variants)
Grids & Containers (10+ variants)

Content Sections

Hero Sections (30+ variants)
Features (25+ variants)
About/Team (20+ variants)
Testimonials (15+ variants)
Stats/Counters (10+ variants)

Marketing

Pricing Tables (20+ variants)
Call to Action (15+ variants)
Newsletters (10+ variants)
Banners (15+ variants)

E-commerce

Product Cards (20+ variants)
Product Grids (10+ variants)
Cart Components (10+ variants)
Checkout Forms (5+ variants)

Forms & Inputs

Contact Forms (15+ variants)
Login/Register (20+ variants)
Input Fields (30+ variants)
Buttons (40+ variants)

UI Elements

Cards (50+ variants)
Modals (15+ variants)
Tabs (10+ variants)
Accordions (10+ variants)
Alerts (15+ variants)
Badges (20+ variants)

Blog

Blog Cards (15+ variants)
Blog Lists (10+ variants)
Article Layouts (5+ variants)

What you actually gain, and what you do not

The time saving is real, but it is worth knowing where it stops so you do not build a project plan on a false premise.

You gain a first version of a screen in fifteen minutes rather than several hours. The section is composed, aligned, has sensible spacing, and behaves correctly on a phone. For somebody who does not feel confident about layout, that is the most valuable part of the offer, because the composition comes from someone who does this well.

What blocks will not settle is which sections should exist at all and in what order the reader meets the arguments. That is a separate phase and a separate category of tool: Relume turns a company description into a sitemap and raw page wireframes, deliberately stripped of appearance. The order is often that you settle the structure there first, and only then look here for sections to fill it.

What you do not gain is originality. The blocks are recognisable, and a page assembled purely from them looks like hundreds of other pages assembled from the same blocks. That is not a flaw while the goal is standing something up quickly, and it becomes one when the product is supposed to stand out.

You also do not gain the behaviour of complex elements. A pricing block is layout and styling, not the logic of switching between monthly and annual billing. Interaction code is yours to write, and for elements needing keyboard and focus handling it pays to pair these sections with a separate behaviour layer.

The third matter is consistency over a longer horizon. Since you copy the code, each section lives its own life from the moment you paste it. Six months and twenty sections later you hold twenty independent fragments where one colour change means twenty edits. The remedy is extracting shared pieces into your own components right after pasting, rather than deferring it.

Wiring it into a Next.js project

Blocks are markup with classes, so pasting them into a component in Next.js works immediately provided the project has Tailwind configured. It pays to adopt a few habits from the first section, though, because without them a site drifts apart within weeks.

The first concerns decomposition. A pasted section is typically a hundred and something lines, most of them repetitive. Rather than leaving it in the page file, extract a component straight away and expose as props whatever should vary: the title, the description, the list of items. The page stays readable, and a second similar section comes from reuse rather than another paste.

The second concerns images. Blocks carry plain image tags, and in this framework they are worth swapping for the component handling optimisation, since otherwise you lose automatic resizing and browser appropriate formats. It is one of those changes easy to skip and clearly visible in speed measurements.

The third concerns colours. Before pasting a second section, move your palette into the Tailwind configuration and replace the block's default values with your own names. Doing that at the first section takes fifteen minutes; at the tenth it is a tedious find and replace across many files.

The fourth concerns dark mode. Blocks usually carry dark theme variants but assume a particular way of enabling it. Check that it matches what your project does before concluding dark mode is broken.

Common mistakes

The first is pasting a section without stripping what you do not use. Blocks are written broadly, with variants and classes covering different situations, so a fair amount of dead code arrives with them. Reviewing it immediately takes five minutes; skipping that step leaves it in the project forever.

The second is failing to match your own spacing scale and colours. Blocks use Tailwind's defaults, and your project most likely has its own palette. Pasting without substitution produces a page where half the elements carry theme colours and half carry defaults, and the difference shows.

The third is planning a project around the free tier. The scope of free blocks is documented precisely and does not cover everything. Check that the sections you need fall within that tier before scheduling work on the assumption that they do.

The fourth is installing the old package. The tailgrids entry in the npm registry is marked deprecated and points at @tailgrids/cli, so tutorials from a few versions back lead into a dead end.

The fifth is treating a block collection as a design system. These are finished compositions, not a set of rules describing how to build new screens. The design system still has to come from your side, with blocks as material rather than as the answer.

The sixth, and the most expensive over time, is forgetting the source. Since the code is copied, a year later nobody on the team remembers which section came from the library and which was written by hand. A short comment at the paste point, or an entry in the project documentation, saves considerable time during a later tidy up, because you immediately know where the original sits and how yours differs from it.

FAQ

Can I use TailGrids commercially for free?

Yes, the free tier ships under MIT, so commercial projects may use it at no cost and with no obligation to place a link in the footer. What is paid is the additional blocks, ready made templates, and the Figma design file.

Is there a subscription?

No, the paid plans are a one off purchase carrying lifetime access and updates. The single user version costs 199 dollars and the five person team version 349 dollars, with prices periodically discounted.

Which plan includes the Figma files?

The team plan alone. Buying the single user version does not get you the Figma design system, which surprises people, since that is often the main reason for buying.

Do the components handle keyboards and screen readers?

Blocks supply layout and styling rather than a complete behaviour layer. For interactive elements it pays to pair them with a library responsible for accessibility instead of assuming the pasted code provides it.

How do I install components from the command line?

The current package is @tailgrids/cli, run through npx. The older entry named tailgrids is marked deprecated in the npm registry and should not be used.

The free tier's source lives in the TailGrids repository, and the full block list with current prices is on the project site.