A light waitlist with an odometer of people in line and a ticket machine where a queue marches toward the gate. Joining drops you into the line and prints a perforated ticket with your number, wave and opening date.
Lumen opens to a new wave each week so onboarding stays personal. Grab your spot and we will send your ticket with the exact week you get in.
One email when your wave opens. No newsletter.
npx shadcn@latest add https://hyperblur.dev/r/waitlist-queue-ticket.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/waitlist-queue-ticket.tsx.
import { WaitlistQueueTicket } from "@/components/hyperblur/waitlist-queue-ticket"
<WaitlistQueueTicket onJoin={(email, position) => console.log(email, position)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Queue is moving" | Pill label above the title. |
| title | string | "Take a number. We let people in every Tuesday." | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| product | string | "Lumen" | Product name on the machine and ticket. |
| initialCount | number | 12482 | People already in line. |
| live | boolean | true | Ticks the counter up every few seconds. |
| perWave | number | 1500 | People admitted per wave. |
| waves | string[] | 9 dates | Opening date of each wave. |
| ctaLabel | string | "Take a number" | Submit button label. |
| onJoin | (email: string, position: number) => void | Promise<void> | Called with the email and the assigned number. | |
| accent | string | "#4f46e5" | Button, ticket number and gate color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |