Countdown Clock Waitlist

ComingSoon36: Countdown Clock Waitlist

A centered pre-launch section built on a single accent color, with a square eyebrow, an accent-highlighted heading, a large colon-separated live countdown clock, a working email-capture form that swaps to a success state, and an avatar social-proof row.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/comingsoon36?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/comingsoon36?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/comingsoon36.tsx.

Quick start

The installed file exports comingsoon36Demo alongside the block: the exact props behind the preview above. Spread it to get a working countdown page in one line.

import { ComingSoon36, comingsoon36Demo } from "@/components/beste/block/comingsoon36";

export default function Page() {
  return <ComingSoon36 {...comingsoon36Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { ComingSoon36 } from "@/components/beste/block/comingsoon36";

export default function Page() {
  return (
    <ComingSoon36
      label="Launching Soon"
      heading="The doors to <strong>Polaris</strong> open when the clock hits zero."
      description="One workspace for your whole team, minus the clutter."
      targetDate="2026-10-24T09:00:00Z"
      avatars={[
        { src: "/people/ava.jpg", alt: "Waitlist member portrait" },
        { src: "/people/theo.jpg", alt: "Waitlist member portrait" },
      ]}
      labels={{
        daysLabel: "Days",
        hoursLabel: "Hours",
        minutesLabel: "Minutes",
        secondsLabel: "Seconds",
        placeholder: "Enter your work email",
        success: "You're on the list. We'll open the doors to you first.",
        proof: "3,400+ teams already counting down",
      }}
    />
  );
}

Props

type ComingSoon36Labels = {
  daysLabel?: string;
  hoursLabel?: string;
  minutesLabel?: string;
  secondsLabel?: string;
  placeholder?: string;
  success?: string;
  proof?: string;
};

type AvatarItem = {
  src: string;
  alt: string;
};

Behavior notes

• The email form owns its input state and swaps to a success panel on submit; handleSubmit calls preventDefault and only flips when the trimmed email is non-empty, so there is no external callback to wire.
• The countdown starts at zero on every unit and only begins ticking on the client: a useEffect parses targetDate, then a one-second setInterval recomputes days, hours, minutes, and seconds from the clamped positive difference, so the initial server render always shows 00:00:00:00.
• Each unit is zero-padded to two digits with padStart, and colon separators are drawn between units (rendered for every unit except the first), so the clock reads as 00:00:00:00.
• The heading is injected with dangerouslySetInnerHTML, and a [&>strong]:text-primary rule tints any <strong> in the string with the accent color; other tags render as raw HTML, so keep the markup to trusted content.
• The form, avatar stack, and proof line are all hidden once submitted, leaving only the centered success panel; the proof row itself renders when either avatars is non-empty or proof is set.
• The avatars render as a -space-x-3 overlapping stack of plain <img> elements with border-background rings.