Ticket Stub Card
A ticket card with a perforated dotted line and side notches; click to tear off the stub.
A two-part ticket card of main ticket and stub, with semicircular notches and a perforated dotted line at the seam to mimic a real ticket stub; clicking the stub tears it along the perforation, spinning and fluttering away as an admitted stamp lands on the main ticket. A good fit for event tickets, coupons, boarding passes, and similar cases.
Loading preview…
npx shadcn@latest add https://webberui.com/r/ticket-stub-card.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
128
12
<TicketStubCard />
Installation
npx shadcn@latest add https://webberui.com/r/ticket-stub-card.jsonOr, once registries are configured in components.json, install it as @webberui/ticket-stub-card.
Usage
import { TicketStubCard } from "@/components/ui/ticket-stub-card";
<TicketStubCard
stub={<span className="font-bold">A-12</span>}
onTear={() => console.log("Torn off!")}
>
<h3 className="text-xl font-bold">A Night of Jazz Under the Moon</h3>
<p className="text-sm text-neutral-500">2026/08/22 19:30</p>
</TicketStubCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content of the main ticket area (event name, time, venue, and so on) |
stub | React.ReactNode | — | Content of the stub area (seat, ticket number, and so on) |
onTear | () => void | — | Callback fired when the stub is torn off |
torn | boolean | — | Controlled torn state; when omitted, the component manages it internally |
stubWidth | number | 128 | Stub width (px) |
notchRadius | number | 12 | Radius of the semicircular perforation notches (px) |
tearHint | string | "點擊撕下" | Tear hint text at the top of the stub (the built-in default is Traditional Chinese — pass this prop to word it in your own language) |
stampText | string | "已入場" | Stamp text applied to the main ticket after tearing (the built-in default is Traditional Chinese); an empty string hides it |
showBarcode | boolean | true | Whether to show the decorative barcode at the bottom of the stub |
className | string | — | Forwarded to the outermost container |
Accessibility
- The stub is a native
buttonelement, focusable with Tab and tearable with Enter / Space, with afocus-visiblefocus ring - When the user has "reduce motion" enabled at the system level, the tear becomes a plain fade out with no spin-and-flutter animation
- The stamp shown after tearing carries
role="status", so assistive technology announces the change in admission state - The barcode, the perforated dotted line, and the paper texture are all decorative elements, hidden from assistive technology with
aria-hidden