Founding Member OfferPRO

ComingSoon23: Founding Member Offer

A bordered pre-launch offer card from the Polaris set that leads with a single accent color, stacking a square eyebrow, a heading, a supporting paragraph, a checked benefit list, a seats-claimed progress bar, and a working rounded email-capture form with its success state.

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

Base UI flavor

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

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

Quick start

The installed file exports comingsoon23Demo alongside the block: the exact props behind the preview above. Spread it to get a working offer card in one line.

import { ComingSoon23, comingsoon23Demo } from "@/components/beste/block/comingsoon23";

export default function Page() {
  return <ComingSoon23 {...comingsoon23Demo} />;
}

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

import { ComingSoon23 } from "@/components/beste/block/comingsoon23";

export default function Page() {
  return (
    <ComingSoon23
      label="Founding Offer"
      heading="Join as a founder, keep 40% off for good."
      description="The first five hundred members set the price they'll always pay."
      benefits={[
        "40% off every plan, for as long as you stay",
        "A direct line to the team building the product",
        "First vote on what we ship after launch",
      ]}
      spotsProgress={74}
      spotsText="372 of 500 claimed"
      labels={{
        spotsCaption: "Founding seats claimed",
        placeholder: "Enter your email to claim yours",
        success: "Seat reserved. We'll email your founder code before launch.",
        finePrint: "No charge today. Your rate is locked the moment we open.",
      }}
    />
  );
}

Props

type ComingSoon23Labels = {
  spotsCaption?: string;
  placeholder?: string;
  success?: string;
  finePrint?: string;
};

Behavior notes

• The email form owns its own 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 spotsProgress value is clamped with Math.max(0, Math.min(100, spotsProgress)) and drives the bar width inline, which animates via a transition-[width] class.
• Each benefit is a list row with a square accent check badge and plain text; the whole list renders only when benefits is non-empty.
• The seats block renders when either spotsText or labels.spotsCaption is set, pairing the caption and bold count above the bar; the finePrint line renders only before submit.
• The card is a rounded bg-card surface with a border in a max-w-2xl column, and every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.