COMPONENTS · SECTIONS

Tailwind Pricing Components & Sections

Display packages with Tailwind pricing tables: tier highlights, billing toggles and CTA buttons that plug straight into Stripe links.

10 sections2 freeTailwind CSS v4HTML · React · MCP

Pick sections Tailkits UI

FREE PRICING SECTIONS · COPY AND PASTE

All free sections

Pricing: Three Plans with Toggle

Three box‑style plan cards with a toggle; pro tier is emphasised

Free

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

View HTML code

<section class="pt-12 lg:pt-16 pb-12 lg:pb-16">
  <div class="max-w-7xl mx-auto px-4 xl:px-0">
    <div class="flex flex-col">
      <div
        class="flex flex-col items-start sm:items-center sm:text-center md:px-4 lg:items-start lg:px-8 lg:text-left"
      >
        <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"
        >
          Get full access
        </div>
        <h2
          class="mt-8 bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-3xl font-semibold text-transparent sm:w-4/5 md:w-3/5 lg:mt-9 lg:w-11/12 lg:text-4xl lg:leading-tight"
        >
          Tailored pricing for every stage of your journey
        </h2>
        <p
          class="text-sm font-medium text-tk-ink-soft leading-normal lg:leading-normal lg:text-base mt-4 sm:w-2/3 md:w-1/2 xl:w-1/2"
        >
          Whether you&#39;re a startup or an enterprise, find the pricing plan
          that perfectly aligns with your growth trajectory.
        </p>
      </div>
      <div class="mt-6 w-full border-b border-b-tk-border-soft lg:mt-12"></div>
      <div
        data-tk-motion="stagger scale"
        class="mt-6 grid w-full gap-y-4 sm:mx-auto sm:w-2/3 md:w-1/2 md:px-4 lg:mx-0 lg:mt-12 lg:w-full lg:grid-cols-3 lg:gap-x-4 lg:gap-y-0 lg:px-8 xl:gap-x-8"
      >
        <div
          class="flex flex-col rounded-tk-2xl border border-border bg-secondary p-4 xl:p-6"
        >
          <div class="flex flex-col">
            <h3 class="text-lg font-medium text-card-foreground">Basic</h3>
            <p class="mt-4 font-medium text-tk-text-soft">
              Essential features at an affordable price.
            </p>
            <div class="mt-6 flex items-end gap-x-3">
              <div class="text-4xl font-semibold text-foreground">$28</div>
              <span class="text-lg text-tk-ink-soft">/ month</span>
            </div>
            <ul class="mt-6 flex flex-col gap-y-2 sm:w-full">
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">10 Projects</p>
              </li>
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">Custom Branding</p>
              </li>
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">Customer Support</p>
              </li>
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">5 Integrations</p>
              </li>
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">Data Security</p>
              </li>
            </ul>
            <a
              href="/features"
              title="All features"
              class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-3 py-2 rounded-tk mt-6 flex self-start"
              data-tk-hover="press"
            >
              All features
              <svg
                class="shrink-0 text-muted-foreground ml-1.5 h-4"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
                  clip-rule="evenodd"
                />
              </svg>
            </a>
          </div>
          <div class="mt-6 flex grow flex-col justify-end">
            <a
              href="/pricing"
              title="Purchase"
              class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm focus:bg-background focus:border-tk-surface border border-foreground/5 bg-muted text-tk-ink hover:border-tk-surface-2 hover:bg-tk-surface disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/30 px-5 py-3 rounded-tk-xl flex"
              data-tk-hover="press"
            >
              Purchase
            </a>
            <p class="mt-3 text-xs font-medium text-tk-text-soft">
              *simple notes about pricing
            </p>
          </div>
        </div>
        <div
          class="flex flex-col rounded-tk-2xl border border-border bg-secondary p-4 shadow-tk-focus-wide xl:p-6"
        >
          <div class="flex flex-col">
            <div class="flex items-center gap-x-4">
              <h3 class="text-lg font-medium text-card-foreground">Pro</h3>
              <div
                class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-primary text-primary-foreground px-2 py-0.5"
              >
                most popular
              </div>
            </div>
            <p class="mt-4 font-medium text-tk-text-soft">
              Advanced features for enhanced productivity.
            </p>
            <div class="mt-4 flex items-center gap-x-3 p-1">
              <svg
                class="h-5 shrink-0 text-tk-success"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M13.5 10.5V6.75a4.5 4.5 0 1 1 9 0v3.75M3.75 21.75h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H3.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
                />
              </svg>
              <p class="mt-1 text-sm font-medium text-tk-success">
                30 days free trial inclueded
              </p>
            </div>
            <div class="mt-6 flex items-end gap-x-3">
              <div class="text-4xl font-semibold text-foreground">$38</div>
              <span class="text-lg text-tk-ink-soft">/ month</span>
            </div>
            <ul class="mt-6 flex flex-col gap-y-2 sm:w-full">
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">10 Projects</p>
              </li>
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">Custom Branding</p>
              </li>
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">Customer Support</p>
              </li>
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">5 Integrations</p>
              </li>
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">Data Security</p>
              </li>
            </ul>
            <a
              href="/features"
              title="All features"
              class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-3 py-2 rounded-tk mt-6 flex self-start"
              data-tk-hover="press"
            >
              All features
              <svg
                class="shrink-0 text-muted-foreground ml-1.5 h-4"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
                  clip-rule="evenodd"
                />
              </svg>
            </a>
          </div>
          <div class="mt-6 flex grow flex-col justify-end">
            <a
              href="/pricing"
              title="Purchase"
              class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-5 py-3 rounded-tk-xl flex"
              data-tk-hover="press"
            >
              Purchase
            </a>
            <p class="mt-3 text-xs font-medium text-tk-text-soft">
              *simple notes about pricing
            </p>
          </div>
        </div>
        <div
          class="flex flex-col rounded-tk-2xl border border-border bg-secondary p-4 xl:p-6"
        >
          <div class="flex flex-col">
            <h3 class="text-lg font-medium text-card-foreground">Premium</h3>
            <p class="mt-4 font-medium text-tk-text-soft">
              Comprehensive solutions for growing businesses.
            </p>
            <div class="mt-6 flex items-end gap-x-3">
              <div class="text-4xl font-semibold text-foreground">$48</div>
              <span class="text-lg text-tk-ink-soft">/ month</span>
            </div>
            <ul class="mt-6 flex w-full flex-col gap-y-2 lg:mt-9">
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">Unlimited Projects</p>
              </li>
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">Custom Branding</p>
              </li>
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">Customer Support</p>
              </li>
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">15 Integrations</p>
              </li>
              <li class="flex items-center gap-x-2 lg:gap-x-4">
                <svg
                  class="h-5 shrink-0 text-tk-ink-soft"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                    clip-rule="evenodd"
                  />
                </svg>
                <p class="font-medium text-tk-text-soft">Data Security</p>
              </li>
            </ul>
            <a
              href="/features"
              title="All features"
              class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-3 py-2 rounded-tk mt-6 flex self-start"
              data-tk-hover="press"
            >
              All features
              <svg
                class="shrink-0 text-muted-foreground ml-1.5 h-4"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
                  clip-rule="evenodd"
                />
              </svg>
            </a>
          </div>
          <div class="mt-6 flex grow flex-col justify-end">
            <a
              href="/pricing"
              title="Purchase"
              class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm focus:bg-background focus:border-tk-surface border border-foreground/5 bg-muted text-tk-ink hover:border-tk-surface-2 hover:bg-tk-surface disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/30 px-5 py-3 rounded-tk-xl flex"
              data-tk-hover="press"
            >
              Purchase
            </a>
            <p class="mt-3 text-xs font-medium text-tk-text-soft">
              *simple notes about pricing
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing: Single Plan with Toggle

Single‑plan card with monthly/annual toggle, price and feature list

Free

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

View HTML code

<section class="pt-12 lg:pt-16 bg-tk-surface pb-8 lg:pb-16">
  <div class="max-w-7xl mx-auto px-4 xl:px-0 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"
    >
      Get full access
    </div>
    <h2
      class="mx-auto mt-8 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-4/5 md:w-3/5 lg:mt-9 lg:text-4xl lg:leading-tight xl:w-7/12"
    >
      Simple solution. <br />
      One price.
    </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"
    >
      Unlock the power of stunning design for your SaaS projects and create a
      memorable user experience that drives growth and customer satisfaction
    </p>
    <div
      data-tk-motion="reveal scale"
      class="mt-6 flex w-full flex-col sm:mx-auto sm:w-2/3 lg:mt-12 lg:w-1/2"
    >
      <div class="flex items-end justify-center gap-x-3">
        <div class="text-4xl font-semibold text-foreground">$28</div>
        <span class="text-lg text-tk-ink-soft">/ month</span>
      </div>
      <div
        class="mt-4 flex flex-wrap items-center justify-center gap-4 lg:mt-6"
      >
        <span class="text-sm text-muted-foreground">monthly</span>
        <button
          type="button"
          role="switch"
          aria-checked="true"
          aria-label="Annual billing"
          class="relative rounded-full h-6 w-11 bg-tk-success"
        >
          <span
            class="absolute top-1/2 -translate-y-1/2 rounded-full bg-background shadow-tk-md h-5 w-5 right-0.5"
          ></span>
        </button>
        <span class="text-sm text-muted-foreground">annually</span>
        <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 py-0.5"
        >
          save 20%
        </div>
      </div>
      <div class="mt-6 w-full border-b border-b-tk-border-soft lg:mt-12"></div>
      <div
        class="mt-6 flex flex-wrap justify-between gap-3 sm:flex-nowrap sm:justify-stretch sm:gap-y-0 lg:mt-12 lg:gap-x-12"
      >
        <ul class="flex flex-col items-start gap-y-2 sm:w-full">
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg
              class="h-5 shrink-0 text-tk-ink-soft"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                clip-rule="evenodd"
              />
            </svg>
            <p class="text-sm font-medium text-muted-foreground">
              Unlimited Projects
            </p>
          </li>
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg
              class="h-5 shrink-0 text-tk-ink-soft"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                clip-rule="evenodd"
              />
            </svg>
            <p class="text-sm font-medium text-muted-foreground">
              Advanced Analytics
            </p>
          </li>
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg
              class="h-5 shrink-0 text-tk-ink-soft"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                clip-rule="evenodd"
              />
            </svg>
            <p class="text-sm font-medium text-muted-foreground">Integration</p>
          </li>
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg
              class="h-5 shrink-0 text-tk-ink-soft"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                clip-rule="evenodd"
              />
            </svg>
            <p class="text-sm font-medium text-muted-foreground">Figma Files</p>
          </li>
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg
              class="h-5 shrink-0 text-tk-ink-soft"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                clip-rule="evenodd"
              />
            </svg>
            <p class="text-sm font-medium text-muted-foreground">
              Tailwind Files
            </p>
          </li>
        </ul>
        <ul class="flex flex-col items-start gap-y-2 sm:w-full">
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg
              class="h-5 shrink-0 text-tk-ink-soft"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                clip-rule="evenodd"
              />
            </svg>
            <p class="text-sm font-medium text-muted-foreground">
              Custom Branding
            </p>
          </li>
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg
              class="h-5 shrink-0 text-tk-ink-soft"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                clip-rule="evenodd"
              />
            </svg>
            <p class="text-sm font-medium text-muted-foreground">
              Customer Support
            </p>
          </li>
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg
              class="h-5 shrink-0 text-tk-ink-soft"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                clip-rule="evenodd"
              />
            </svg>
            <p class="text-sm font-medium text-muted-foreground">
              Data Security
            </p>
          </li>
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg
              class="h-5 shrink-0 text-tk-ink-soft"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                clip-rule="evenodd"
              />
            </svg>
            <p class="text-sm font-medium text-muted-foreground">
              Automated Updates
            </p>
          </li>
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg
              class="h-5 shrink-0 text-tk-ink-soft"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                clip-rule="evenodd"
              />
            </svg>
            <p class="text-sm font-medium text-muted-foreground">
              Access Controls
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

8 MORE PRICING SECTIONS IN TAILKITS UI

See plans

Pricing 2

Gradient card with headline, price toggle, icons, features and purchase button

Unlock with Tailkits UI Preview

Pricing 3

Side‑by‑side comparison of basic and pro plans with pricing toggle

Unlock with Tailkits UI Preview

Pricing 4

Two plan cards beneath a flexible pricing header with features and CTA

Unlock with Tailkits UI Preview

Pricing 5

Gradient table comparing Basic, Pro and Premium tiers with features

Unlock with Tailkits UI Preview

Pricing 7

Three tinted cards under a transparent pricing header highlighting plans

Unlock with Tailkits UI Preview

Pricing 8

Grid of four tiers: Basic, Pro, Premium and Enterprise, each with features

Unlock with Tailkits UI Preview

Pricing 9

A 3-column layout pricing components, one of them is highlighted.

Unlock with Tailkits UI Preview

Pricing 10

A three-column pricing section, with the middle one featuring a gradient background.

Unlock with Tailkits UI Preview

PRICING SECTIONS FROM OTHER LIBRARIES

All component libraries

Third-party libraries in the Tailkits directory that include pricing sections. Reviewed by the editors; sponsored listings are marked.

Shadcnexamples

Paid

Full-page shadcn/ui examples for Next.js: dashboards, apps and email templates

Prime UI

Paid

AI site builder, Next.js, Tailwind, no code

HyperUI

Free

226 Free & Open Source Tailwind CSS Components

coss ui

Free

Free Base UI and Tailwind 4 components for React, now with Chat UI

Efferd

Free

Beautiful Shadcn blocks - ready-to-use & built for speed

SmoothUI

Free

Free animated React components and blocks for shadcn/ui and Tailwind CSS 4

Htmlwind

Paid

225+ responsive Tailwind CSS components

GOOD TO KNOW

Frequently asked questions

Answers to common questions about Tailwind pricing components.

Are these Tailwind pricing sections free?

2 of the 10 pricing sections on this page are free (Three Plans with Toggle, Single Plan with Toggle): copy the HTML above, no account needed. The other 8 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 pricing 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 pricing 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-<name>.json. Paid sections install with the token from your Tailkits UI account.

Can an AI coding assistant add a pricing 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 pricing sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.

Which other libraries have Tailwind pricing components?

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

Tailwind Pricing Components & Sections

FREE PRICING SECTIONS · COPY AND PASTE

Pricing: Three Plans with Toggle

Tailored pricing for every stage of your journey

Basic

Pro

Premium

Pricing: Single Plan with Toggle

Simple solution.
One price.