Peel Sticker Card: React + Tailwind Component

A corner peels up like a sticker on hover to expose what is underneath, and can be dragged off entirely.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/peel-sticker-card.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Resting page-curl sizepeelSize

Hover page-curl sizehoverPeelSize

Tear-off threshold ratiothreshold

0.55

Accessible label for the page curlpeelLabel

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<PeelStickerCard/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/peel-sticker-card.en.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`	`"Peel the sticker"`	Accessible label for the peel hotspot (the English source includes this default — 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

Peel Sticker Card