Ticket-style waitlist pass with notched edges, a QR code stub and a tilt-and-glare hover.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/waitlist-pass
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { WaitlistPass } from "@/components/nextui/waitlist-pass";23export function Ticket() {4return <WaitlistPass brand="Acme" label="Early access" title="you@acme.com" subtitle="Spot #128" />;5}
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "nextui" | Name next to the logo |
| logo | ReactNode | – | Logo before the brand name; defaults to a four-square mark |
| label | string | "Waitlist pass" | Small caps line above the title |
| title | string | "alex@example.com" | The big line, usually the email or name |
| subtitle | string | "@alexmorgan" | Muted line under the title; leave empty to hide it |
| code | ReactNode | – | Replaces the sample QR code, e.g. an SVG QR generated for this person |
| interactive | boolean | true | Tilt and light follow the pointer |
| className | string | – | Extra class on the root |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.