Browse components
Tear Ticket
An event ticket whose perforated stub you pull against rubber-band tension until it rips free and tumbles away, stamping a confirmation onto the ticket.
Installation
npx shadcn@latest add @glint-ui/tear-ticketFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/tear-ticket.json
Usage
import { TearTicket } from "@/components/ui/tear-ticket";
<TearTicket title="Neon Nights" seat="GA 042" onTear={() => checkIn(ticketId)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Neon Nights" | Event name. |
| subtitle | string | "Warehouse 9 · Live set" | Venue line. |
| date | string | "Sat 14 Jun" | Date field. |
| time | string | "21:00" | Doors field. |
| seat | string | "GA 042" | Seat, also printed on the stub. |
| confirmation | string | "You're in!" | Stamp shown after tearing. |
| accent | string | "#fbbf24" | Stub and stamp color. |
| threshold | number | 90 | Px of pull needed before release tears the stub. |
| onTear | ReactNode | — | Called once when the stub is torn off. |
| className | string | — | Extra classes for the root element. |