Peel Sticker Card
A corner peels up like a sticker on hover to expose what is underneath, and can be dragged off entirely.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
The bottom-right corner of the card peels up like a sticker: on hover the peel grows, exposing the paper backing and its shadow, and dragging the peel past a threshold rips the whole sticker away, revealing the content hidden beneath. A good fit for revealing promo codes, easter eggs, or scratch-card style surprises.
npx shadcn@latest add "https://webberui.com/r/peel-sticker-card.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<PeelStickerCard />
Installation
npx shadcn@latest add "https://webberui.com/r/peel-sticker-card.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/peel-sticker-card.
Usage
import { PeelStickerCard } from "@/components/ui/peel-sticker-card";
<PeelStickerCard
className="h-52 w-80"
onPeel={() => console.log("Peeled off!")}
reveal={
<div className="flex h-full items-center justify-center font-mono font-bold">
WEBBER-88
</div>
}
>
<div className="flex h-full items-center justify-center bg-gradient-to-br from-violet-500 to-orange-400 text-white">
Drag the bottom-right corner to peel
</div>
</PeelStickerCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Front content of the sticker (the layer on top, the one that can be peeled off) |
reveal | React.ReactNode | — | The underlying content exposed once the sticker is peeled off |
peelSize | number | 36 | Size of the bottom-right peel at rest (px) |
hoverPeelSize | number | 88 | Size the peel grows to on hover (px) |
threshold | number | 0.55 | Peel-off threshold: the whole sticker comes off once the peel exceeds "the card's shorter edge × this ratio" (0 to 1) |
onPeel | () => void | — | Fires when the whole sticker peels off |
peelLabel | string | "撕開貼紙" | Accessible label for the peel hotspot (the built-in default is Traditional Chinese — pass this prop to word it in your own language) |
className | string | — | Forwarded to the outermost container (you must specify the width and height yourself) |
Accessibility
- The bottom-right hotspot is a focusable
role="button", and Enter / Space peels the sticker off directly with no dragging required - Once peeled, a status region with
aria-live="polite"announces to screen readers that the sticker has been peeled off - When the user has "reduce motion" enabled at the system level, the peel jumps straight to position and the peel-off becomes a plain fade out with no spring or fly-away animation
- Purely decorative layers such as the folded corner, the sheen, and the shadow are all marked
aria-hidden, so they do not interfere with assistive technology - Peeling is a one-way interaction; if you want to let users undo it, you can remount the component by changing its
key, as shown in the demo, to stick it back on