Launch Pass TicketPRO

ComingSoon51: Launch Pass Ticket

A Polaris coming-soon section styled as a launch pass ticket, with a square eyebrow, a heading, and a working email notify form on the main stub, beside a perforated tear-off stub carrying an admit-one tag, a rendered barcode, and a pass code.

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

Base UI flavor

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

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

Quick start

The installed file exports comingsoon51Demo alongside the block: the exact props behind the preview above. Spread it to get a working launch pass in one line.

import { ComingSoon51, comingsoon51Demo } from "@/components/beste/block/comingsoon51";

export default function Page() {
  return <ComingSoon51 {...comingsoon51Demo} />;
}

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

import { ComingSoon51 } from "@/components/beste/block/comingsoon51";

export default function Page() {
  return (
    <ComingSoon51
      brand="Polaris"
      label="Early Access Pass"
      labels={{
        dateLabel: "Launch day",
        dateValue: "Oct 24, 2026",
        admitLabel: "Admit one",
        codeLabel: "Your pass",
        placeholder: "Enter your email",
        success: "Pass reserved. We'll email it before the doors open.",
      }}
      heading="Claim your pass to launch day."
      description="The first five hundred on the list walk in the moment we open."
      code="PLR-2026"
    />
  );
}

Props

type ComingSoon51Labels = {
  dateLabel?: string;
  dateValue?: string;
  admitLabel?: string;
  codeLabel?: string;
  placeholder?: string;
  success?: string;
};

Behavior notes

• The email form owns its own state; handleSubmit calls preventDefault and only flips to the success panel when the trimmed email is non-empty, so there is no external callback to wire.
• The date block renders whenever labels.dateLabel or labels.dateValue is present, drawn under a border-t rule above the form.
• The tear-off stub is faked with a dashed border between the two panels plus two background-colored notch circles positioned on the tear line, so it reads as a perforated edge on desktop.
• The barcode is rendered from a fixed internal BARCODE array of relative widths, mapped to aria-hidden bars, and the code prints in a monospace tracking-widest style under labels.codeLabel.
• The labels.admitLabel renders as a bg-primary uppercase pill, and every string is plain text with no inline markup parsing, so any HTML passed in shows as escaped text.