Home / Blocks / Marketing / Waitlist Pages
4 blocks in this section

Shadcn Waitlist and Coming Soon Pages

Pre-launch pages for every gate: position in line, launch countdown, a referral mechanic, a fit-gated application, and a segmented private-beta code gate.

Jump to a waitlist page block

4 blocks in this collection

Free Pro

  1. Waitlist 1 Free
  2. Waitlist 2 Pro
  3. Waitlist 3 Pro
  4. Waitlist 4 Pro

How it works

Three steps to working code

Install a block and the files land in your repository. Nothing calls back to us.

  1. terminal

    $ npx shadcn@latest add @shadcnstore/waitlist-1

    ✓ Checking registry

    ✓ Installing dependencies

    01

    Run one command

    Every preview above prints its own. The CLI writes the block and the components it needs into your project.

    Installation docs
  2. your project 3 files added

    components/

    ├─ ui/

    ├─ button.tsx

    └─ navigation-menu.tsx

    └─ waitlist-1.tsx

    02

    Get real files

    React, TypeScript and Tailwind v4, with no framework imports. Next.js, Vite, Remix and Astro all work.

  3. waitlist-1.tsx

    <Menu.Trigger

    - asChild

    + render={<button />}

    />

    03

    Edit it as your own

    Built on Base UI, not Radix, so keyboard and focus behaviour come from the primitive.

Blocks that hold state already carry the use client directive the Next.js App Router needs.

Guide

Waitlist pages that give something back#

A waitlist asks for an email in exchange for nothing, unless you design it otherwise. These four give something concrete back: a position, a referral mechanic, a decision, or a date.

The four waitlist blocks#

  • Waitlist 1: a single-screen page that returns a position in line. Free.
  • Waitlist 2: a launch countdown page that converts itself on launch day.
  • Waitlist 3: a working referral waitlist with a counting position, real share links, a settling leaderboard and honest tier progress.
  • Waitlist 4: a segmented partner-code gate with per-segment validation, a reserved rejection shake and a request-access fallback.

Returning a position#

Waitlist 1 shows a position after signup, which converts an abstract wait into a concrete one. Supply the number from your own store; the block renders and animates the value rather than inventing one. A fabricated position is a small lie that becomes obvious the moment two people compare notes.

Referral mechanics that stay honest#

Waitlist 3 counts a position upward as referrals land, carries real share links and shows tier progress. Honest here means the tiers show how far away a reward is rather than implying one is nearly reached. A progress bar that always sits at ninety percent is the oldest trick in this format and the fastest way to lose the people most willing to share.

Gating access with a code#

Waitlist 4 validates partner codes per segment, answers a rejection with a short shake rather than a page reload, and offers a request-access route for everybody with no code, which is most visitors. A gate with no fallback turns your entire non-invited audience away at the door.

Launch day#

Waitlist 2 converts itself when the timer reaches zero rather than sitting on a page of zeroes waiting for somebody to deploy. That matters because launch day is exactly when nobody has a spare hour to update a landing page, and a countdown that has expired says the product did not ship.

What to ask for#

An email address. Anything else costs signups and can be asked later, when there is a product to ask inside. The exception is a genuine qualification question that changes who you let in first, which is what Waitlist 4 is for.

What replaces a waitlist page#

Once you launch, the same page becomes a hero section with a real call to action, and the waiting list becomes a newsletter capture. A countdown banner carries the last days of the wait across the rest of the site.

FAQ

Waitlist Pages questions, answered

What people ask before choosing a block from this collection.

Waitlist 1 returns a position after signup, which gives the visitor something concrete in exchange for an email. Supply the number from your own store; the block renders and animates the value rather than inventing one.
Waitlist 3 is a working referral flow, with a position that counts as it improves, real share links, a settling leaderboard and honest tier progress. Honest here means the tiers show how far away a reward is instead of implying one is nearly reached.
Waitlist 4 is a segmented partner-code gate. Codes validate locally per segment, a rejection gets a short shake rather than a redirect, and a request-access fallback catches everyone who has no code, which is most visitors.
Waitlist 2 converts itself when the timer reaches zero rather than sitting on a page of zeroes waiting for a deploy. That matters because launch day is exactly when nobody is free to update a landing page.
Waitlist 1, the single-screen page that returns a position, is free. The countdown, referral and partner-gate pages are Pro. See the pricing page for licence details.

Documentation

The components behind these blocks

How to install, customise and combine the shadcn/ui components this collection is built from.

Free & Premium Templates

Launch Faster with Complete Templates

Love these blocks? Get our free dashboard and landing page templates with 30+ pre-built pages and all the components you need. Premium templates with advanced features launching soon at $69.

Free Templates Now
30+ Pages Included
Premium Coming Soon