Staaarter

Launch Pass Ticket

A launch-day sign-up panel shaped like a physical ticket. The main stub carries the eyebrow, heading, and email form, while a dashed-border tear-off stub on the side carries an "Admit one" tag, a decorative barcode, and a static pass code.

By Staaarter Team
Coming Soon
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/launch-pass-ticket.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon51.tsx instead.

Usage

The file also exports comingsoon51Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon51, comingsoon51Demo } from "@/components/blocks/coming-soon/comingsoon51";

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

Props

PropTypeDefaultDescription
headingstring"Your seat is reserved for launch day"Main heading on the ticket's main stub.
descriptionstring"Sign up now and we'll send you the details the moment doors open."Supporting sentence under the heading.
passCodestring"PASS-7X9K-2026"Static pass code printed on the tear-off stub.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The email form is a real controlled input with a submit handler that flips local state to a success message, nothing is sent over the network.
  • The barcode is purely decorative markup, a fixed static array of bar widths, not a real scannable barcode and not generated from the pass code.
  • The dashed divider and "Admit one" tag are static styling with no interactivity.