What should a waitlist section ask for?

As little as possible. An email address is enough to start; add a name, company or role only when you will use it to plan invites. Every extra field lowers sign-ups.

Are the waitlist forms accessible?

Yes. Every field has a label (visible or screen-reader only), the right input type and autocomplete hint, and the submit control is a real button.

Do these forms send data anywhere?

No. They are static HTML. Point the form action at your own endpoint, a form service or your email tool.

Are these Tailwind waitlist sections free?

1 of the 6 waitlist sections on this page are free (Centered Waitlist with Avatar Proof): 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 waitlist 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 waitlist 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 waitlist 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 waitlist sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.

Tailwind Waitlist Components & Sections

Waitlist: Centered Waitlist with Avatar Proof

Centered waitlist with inline email form and avatar social proof

Free

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

View HTML code

<section
  class="py-16 lg:py-24 bg-gradient-to-b from-tk-tint-1 via-tk-tint-2 to-background"
>
  <div class="max-w-7xl mx-auto px-4 xl:px-0">
    <div
      data-tk-motion="cascade"
      class="flex flex-col items-center text-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"
      >
        <svg
          class="h-3 shrink-0 mr-1.5 text-muted-foreground"
          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="M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z"
            clip-rule="evenodd"
          />
        </svg>
        Private beta
      </div>
      <h2
        class="bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-3xl font-semibold text-transparent lg:text-5xl mt-6 sm:w-4/5 md:w-3/4 lg:mt-8 lg:w-2/3 lg:leading-tight xl:w-3/5"
      >
        Be the first to build with Saaslandings
      </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-2/5"
      >
        We are opening the doors in small batches. Join the waitlist and we will
        send your invite as soon as a seat frees up.
      </p>
      <form
        class="mt-8 flex w-full flex-col gap-3 sm:w-4/5 md:w-3/5 lg:mt-10 lg:w-1/2 lg:flex-row xl:w-2/5"
        action="#"
        method="post"
      >
        <div class="flex w-full flex-col">
          <label for="email" class="sr-only">Work email</label>
          <div
            class="group relative rounded-tk-xl border border-input bg-background transition hover:bg-muted"
          >
            <input
              id="email"
              name="email"
              type="email"
              class="font-medium w-full rounded-tk-xl bg-transparent shadow-tk-sm text-sm placeholder:font-medium placeholder:text-sm text-card-foreground focus-visible:outline-none focus:shadow-tk-focus pl-10 pr-9 py-3 placeholder:text-tk-text-placeholder"
              required
              autocomplete="email"
              placeholder="[email protected]"
            />
            <svg
              class="absolute top-1/2 -translate-y-1/2 left-0 flex h-5 items-center text-muted-foreground transition group-hover:text-tk-text-faint group-focus:text-muted-foreground ml-3"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z"
              />
              <path
                d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z"
              />
            </svg>
          </div>
        </div>
        <button
          type="submit"
          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 shrink-0"
          data-tk-hover="press"
        >
          Join the waitlist
          <svg
            class="shrink-0 ml-3 h-5"
            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>
        </button>
      </form>
      <p class="mt-3 text-xs font-medium text-tk-text-soft">
        No spam. One email when your seat is ready.
      </p>
      <div class="mt-8 flex items-center gap-x-3 lg:mt-10">
        <div class="flex -space-x-2">
          <figure class="flex items-center justify-center">
            <img
              src="https://tailkits.com/ui/iframe/assets/img/avatar-1.png"
              alt=""
              class="shrink-0 rounded-full object-cover h-6 w-6 lg:h-8 lg:w-8 border-background border lg:border-[1.5px]"
            />
          </figure>
          <figure class="flex items-center justify-center">
            <img
              src="https://tailkits.com/ui/iframe/assets/img/avatar-2.png"
              alt=""
              class="shrink-0 rounded-full object-cover h-6 w-6 lg:h-8 lg:w-8 border-background border lg:border-[1.5px]"
            />
          </figure>
          <figure class="flex items-center justify-center">
            <img
              src="https://tailkits.com/ui/iframe/assets/img/avatar-3.png"
              alt=""
              class="shrink-0 rounded-full object-cover h-6 w-6 lg:h-8 lg:w-8 border-background border lg:border-[1.5px]"
            />
          </figure>
          <figure class="flex items-center justify-center">
            <img
              src="https://tailkits.com/ui/iframe/assets/img/avatar-4.png"
              alt=""
              class="shrink-0 rounded-full object-cover h-6 w-6 lg:h-8 lg:w-8 border-background border lg:border-[1.5px]"
            />
          </figure>
        </div>
        <p class="text-sm font-medium text-tk-ink-soft">
          <span class="font-semibold text-foreground">2,400+</span> makers
          already on the list
        </p>
      </div>
    </div>
  </div>
</section>

Tailwind Waitlist Components & Sections

FREE WAITLIST SECTIONS · COPY AND PASTE

Waitlist: Centered Waitlist with Avatar Proof

Be the first to build with Saaslandings

5 MORE WAITLIST SECTIONS IN TAILKITS UI

Waitlist 2

Waitlist 3

Waitlist 4

Waitlist 5

Waitlist 6

MORE TAILWIND SECTIONS

Frequently asked questions