Peel-off Sticker React component
A sticker you can actually peel: grab a corner and it lifts along a fold that follows your pointer, showing the paper backing in the sticker's own shape with a soft shadow; let go and it settles back, or pull far enough and it comes off and sticks itself back on.
About the Peel-off Sticker component
Peel-off Sticker makes any badge, logo or illustration behave like a real sticker. Grab its corner and drag: it lifts along a fold that follows your pointer, showing the white paper backing on the underside — in the sticker's own shape, whether it's round, rounded or tilted — with a soft shadow beneath.
Let go and it settles back down. Pull it far enough and it comes off completely, then quietly sticks itself back on so the fun can start again. The corner rests slightly lifted, so people can tell it's peelable.
When to use it
Use it for playful brand moments: laptop-sticker style badges on an about page, launch stickers, merch and swag pages, easter eggs, or as a reward reveal.
It's a toy, not a control: don't hide important content or actions behind peeling.
Installation
Add the Peel-off Sticker component to your project with the shadcn CLI. It lands in components/peel-off-sticker.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/peel-off-stickerOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<PeelOffSticker /> accepts 7 props (required ones are marked *). It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| children* | React.ReactNode | — |
| corner The corner you grab to peel. | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-right" |
| curl How far the corner lifts at rest, as a hint that it can be peeled, in px. | number | 24 |
| removeAt Peel past this share of the sticker and it comes off completely (0–1). 1 = never comes off. | number | 0.5 |
| restickAfter After coming off, stick back on after this many ms (0 = stay off). | number | 1400 |
| label Accessible name for the sticker. | string | "Sticker" |
| onPeelOff | () => void | — |
- children*React.ReactNode
- corner
The corner you grab to peel.
"bottom-right" | "bottom-left" | "top-right" | "top-left"Default: "bottom-right" - curl
How far the corner lifts at rest, as a hint that it can be peeled, in px.
numberDefault: 24 - removeAt
Peel past this share of the sticker and it comes off completely (0–1). 1 = never comes off.
numberDefault: 0.5 - restickAfter
After coming off, stick back on after this many ms (0 = stay off).
numberDefault: 1400 - label
Accessible name for the sticker.
stringDefault: "Sticker" - onPeelOff() => void
npm dependencies
Installed for you by the shadcn CLI.
Peel-off Sticker FAQ
- Can I peel from a different corner?
- Yes, corner takes bottom-right (default), bottom-left, top-right or top-left.
- Does it work with round or tilted stickers?
- Yes. The underside is drawn from your sticker itself, so it always matches its shape, including rotation and rounded borders.
- Can it stay peeled off?
- Set restickAfter={0} and it stays off once removed; removeAt={1} means it can never be peeled all the way off.
- Does it work on phones?
- Yes, drag the corner with a finger. With reduced motion turned on the sticker stays flat.
