Peel Sticker
A sticker you peel back by its corner to reveal what is under it. Free, MIT · Animated components › Stickers, tickets and boards
A sticker over a small area: drag its lifted corner to peel it back, see its reverse side, and release past the threshold to uncover what is under it. The corner stays under the finger in any direction, springs back when let go too early and peels off on its own once released past the threshold. A regular Open button does the same from the keyboard. The fold is CSS clip-path geometry relative to the sticker's size; there is no graphics engine.
Installation
npx valyro-cli@latest add peel-stickernpx shadcn@latest add https://valyro.xyz/r/peel-sticker.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { PeelSticker } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
cover * | ReactNode | The face of the sticker: what lies on top while it is closed. | |
children | ReactNode | What the sticker reveals. It cannot be focused while the sticker is closed. | |
open | boolean | Controlled open; use with onOpenChange. | |
defaultOpen | boolean | false | Initial open when uncontrolled. |
onOpenChange | (open: boolean, reason: PeelStickerReason) => void | A request to open or close, once per button press or finished gesture (reason), when it is decided, without waiting for the animation. Not a confirmation of anything on a server. | |
corner | 'top-start' | 'bottom-end' | 'bottom-end' | The lifted corner, on the logical sides (mirrored in right-to-left pages). Default bottom-end. |
threshold | number | 0.55 | Share of the diagonal the corner must be peeled before release opens the sticker (a quick flick needs less). Default 0.55. |
reclosable | boolean | true | Show a Close action once open. Default true. |
material | 'paper' | 'gloss' | 'foil' | 'paper' | Material of the sticker: paper (default), gloss or foil. Same mechanics, different surface. |
disabled | boolean | false | Neither the gesture nor the button work. |
labels | Partial<PeelStickerLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Scratch Reveal — Scratch off a cover to reveal text or a picture
- Tear-off Ticket — A ticket whose stub tears off along the perforation
- 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: Halftone Image Reveal · Next: Scratch Reveal · All Animated components