Are these Tailwind stats sections free?

1 of the 6 stats sections on this page are free (Split Layout with Metrics): copy the HTML above, no account needed. The other 5 are part of Tailkits UI, the paid library; each shows a preview here and unlocks its code with a Tailkits UI plan.

Which Tailwind CSS version do the stats components use?

Tailwind CSS v4. The code is plain HTML with utility classes; colours, radii and shadows read CSS variables named like shadcn/ui's (bg-primary, text-muted-foreground), so a shadcn theme or a DESIGN.md export reskins every section. Add tailkits-theme.css next to the code for the default look.

Can I use these stats sections in React or Next.js?

Yes. Every section is also a React component in the @tailkits shadcn registry. Free sections install without an account, for example: npx shadcn@latest add https://tailkits.com/r/free- .json. Paid sections install with the token from your Tailkits UI account.

Can an AI coding assistant add a stats section for me?

Yes. The Tailkits MCP at tailkits.com/mcp is free and open, with no account: Claude Code, Cursor and other MCP clients can search the stats sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.

Which other libraries have Tailwind stats components?

The directory lists 1 third-party library with stats sections, including . They are shown below our own sections, with their pricing and stack.

Tailwind Stats Components & Sections

FREE STATS SECTIONS · COPY AND PASTE

All free sections

Stats: Split Layout with Metrics

Split layout with phone image plus three big metrics on the right

Free

Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-stats-1.json

View HTML code

<section class="pt-12 lg:pt-16 relative pb-12 lg:pb-16">
  <img
    class="absolute left-0 top-0 -z-20 h-full w-full object-cover"
    src="https://tailkits.com/ui/iframe/assets/img/bg-15.png"
    alt=""
  />
  <div class="max-w-7xl mx-auto px-4 xl:px-0">
    <div class="flex flex-col items-center">
      <div
        class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-background text-secondary-foreground px-2.5 py-1"
      >
        Contact
      </div>
      <h2
        class="mt-6 bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-center text-3xl font-semibold text-transparent sm:w-2/3 md:w-1/2 lg:mt-9 lg:text-4xl lg:leading-tight xl:w-7/12"
      >
        SaaS Design Made Easy
      </h2>
      <p
        class="text-sm font-medium text-tk-ink-soft leading-normal lg:leading-normal lg:text-base mt-4 text-center sm:mx-auto sm:w-2/3 md:w-1/2 xl:w-2/5"
      >
        Streamline your projects with our comprehensive collection of design
        resources and stay ahead in the competitive SaaS market
      </p>
    </div>
    <div
      data-tk-motion="stagger wipe"
      class="mt-12 grid items-center gap-y-8 text-center md:px-4 lg:grid-cols-3 lg:gap-x-12 lg:gap-y-0 lg:px-8"
    >
      <div
        class="relative first:before:relative before:left-1/2 before:-translate-x-1/2 lg:before:translate-x-0 before:w-16 before:h-px before:absolute lg:before:-left-6 lg:before:top-1/2 lg:before:-translate-y-1/2 lg:before:w-px lg:before:h-16 before:bg-secondary before:-top-4"
      >
        <div
          class="bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-5xl font-semibold text-transparent lg:text-6xl xl:text-7xl"
        >
          6X
        </div>
        <p
          class="mt-1 px-2.5 text-sm font-medium lg:mt-3 text-muted-foreground"
        >
          Faster than others
        </p>
      </div>
      <div
        class="relative first:before:relative before:left-1/2 before:-translate-x-1/2 lg:before:translate-x-0 before:w-16 before:h-px before:absolute lg:before:-left-6 lg:before:top-1/2 lg:before:-translate-y-1/2 lg:before:w-px lg:before:h-16 before:bg-secondary before:-top-4"
      >
        <div
          class="bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-5xl font-semibold text-transparent lg:text-6xl xl:text-7xl"
        >
          32%
        </div>
        <p
          class="mt-1 px-2.5 text-sm font-medium lg:mt-3 text-muted-foreground"
        >
          Efficient compred to previous version
        </p>
      </div>
      <div
        class="relative first:before:relative before:left-1/2 before:-translate-x-1/2 lg:before:translate-x-0 before:w-16 before:h-px before:absolute lg:before:-left-6 lg:before:top-1/2 lg:before:-translate-y-1/2 lg:before:w-px lg:before:h-16 before:bg-secondary before:-top-4"
      >
        <div
          class="bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-5xl font-semibold text-transparent lg:text-6xl xl:text-7xl"
        >
          100%
        </div>
        <p
          class="mt-1 px-2.5 text-sm font-medium lg:mt-3 text-muted-foreground"
        >
          Customer happiness
        </p>
      </div>
    </div>
  </div>
</section>