Waitlist with Avatars

ComingSoon6: Waitlist with Avatars

A centered waitlist section that stacks a badge, heading, and description above an inline email input and join button, then shows an overlapping subscriber avatar stack beside a templated join-count line for social proof.

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/comingsoon6?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

The installed file exports comingsoon6Demo alongside the block: the exact props behind the preview above. Spread it to get a working waitlist section in one line.

import { ComingSoon6, comingsoon6Demo } from "@/components/beste/block/comingsoon6";

export default function Page() {
  return <ComingSoon6 {...comingsoon6Demo} />;
}

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

import { ComingSoon6 } from "@/components/beste/block/comingsoon6";

export default function Page() {
  return (
    <ComingSoon6
      badge={{ label: "Early access", variant: "secondary" }}
      heading="Be the first to experience it"
      description="Join the waitlist and get access the moment we launch."
      subscribers={[
        { name: "Alex", image: "/people/alex.jpg" },
        { name: "Sarah", image: "/people/sarah.jpg" },
        { name: "Mike", image: "/people/mike.jpg" },
      ]}
      subscriberCount={2840}
      labels={{
        placeholder: "Enter your email",
        button: "Join waitlist",
        joinedCount: "{count}+ people already joined",
        noSpam: "No spam. Unsubscribe anytime.",
      }}
    />
  );
}

Props

interface Subscriber {
  name: string;
  image: string;
}

Behavior notes

• The email Input and join Button render unconditionally as static UI: there is no local state, submit handler, or callback wired to either control.
• The join-count line interpolates subscriberCount.toLocaleString() into labels.joinedCount by replacing the {count} token, so the number renders with locale grouping.
• The proof row renders when either subscribers.length > 0 or subscriberCount > 0; within it the avatar stack renders only when there are subscribers, and it slices to the first five entries.
• Avatars render as a -space-x-3 overlapping stack of plain <img> elements with border-background rings, and the noSpam note renders only when supplied.
• The badge, heading, and description each render only when their prop is present, and every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.
• Uses the shadcn Badge, Button, and Input primitives, with an ArrowRight lucide icon inside the button.