Tear-off Ticket
A ticket whose stub tears off along the perforation. Free, MIT · Animated components › Stickers, tickets and boards
A ticket with a perforated stub: pull the stub away from the perforation and release past the threshold to tear it off and reveal the rest; a regular button does the same in one press. The stub follows the finger, springs back when let go too early and, once torn, flies off from where it was released while the ticket opens up. The gesture starts only on the stub, so links on the ticket stay plain links. Revealing does not register, redeem or send anything: the app does that.
Installation
npx valyro-cli@latest add tear-off-ticketnpx shadcn@latest add https://valyro.xyz/r/tear-off-ticket.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { TearOffTicket } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
front * | ReactNode | The visible face of the closed ticket. | |
revealedContent * | ReactNode | What tearing the stub off reveals: a code, an invitation, event details. Not a secret: it is in the page. | |
stub | ReactNode | Content of the stub; default labels.stub. | |
open | boolean | Controlled open; use with onOpenChange. | |
defaultOpen | boolean | false | Initial open when uncontrolled. |
onOpenChange | (open: boolean, reason: TearOffTicketReason) => void | A request to change the state, with what caused it. Controlled tickets open once open turns true. | |
onReveal | () => void | Once per real opening (the accepted open going from false to true); not for a ticket that starts open. | |
tearThreshold | number | 0.65 | Share of the stub's size it must be pulled before release tears it off (a quick flick needs less). Default 0.65. |
orientation | 'horizontal' | 'vertical' | 'vertical' | Direction of the perforation: vertical (default, the stub at the inline end, pulled sideways) or horizontal (the stub at the bottom, pulled down). |
variant | 'plain' | 'paper' | 'game' | 'plain' | Look: plain (default) quiet surfaces and a thin dashed line, paper printed card with notches, game a pass in the theme's accent. |
labels | Partial<TearOffTicketLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Peel Sticker — A sticker you peel back by its corner to reveal what is under it
- Scratch Reveal — Scratch off a cover to reveal text or a picture
- Split-Flap Board — Mechanical departure board: only the changed characters flip
- Swipe Action Card — Swipe a card sideways to reveal its actions
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- Liquid Button — Button that fills with “liquid” on hover
- Theme Toggler — Light/dark switch with a View Transitions reveal
- GitHub Stars Button — Repository link with a rolling star count
- Share Button — Button that fans out social icons
- Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
- Number Wheel — Number on a spinning wheel with neighboring values
Previous: Scratch Reveal · Next: Split-Flap Board · All Animated components