Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Sticker peel

Stickers you peel off a surface. Press one and the corner nearest your finger curls back over a fold; keep holding and it lifts free and follows you; let go and it presses flat again with a little squash.

Pro
pnpm dlx shadcn@latest add @caliper/sticker-peel

Laptop lid

Press a sticker to peel it, then move it.

Installs components/ui/sticker-peel.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

  • Playful personalisation: laptop lids, profile walls, journals, reward collections.
  • Marketing and onboarding moments where a tactile object earns its place.

Skip it when

  • Arranging content people must find again; use a board with alignment.
  • Dense surfaces; stickers need room around them to be grabbed.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Peel, then lift
The corner curls first; only a moment later, or as soon as it moves, does the sticker come free and rise.

Styling

A real fold
The front loses the corner beyond a 45° fold and the flap is exactly that corner reflected over it, so the curl reads as paper at any size.

Usage

Keyboard pick-up
Enter or Space picks a sticker up, arrows move it (Shift for larger steps), Enter puts it down and Escape returns it.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/sticker-peel

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { StickerPeel } from "@/components/ui/sticker-peel"

The worked example comes with Pro

The 32-line example behind the preview opens here, ready to copy.

  • 602 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

StickerPeel

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
label *string—Names the surface, e.g. "Laptop lid".
stickers *Sticker[]—Each sticker's centre as fractions of the surface (0 to 1).
onMove((id: string, x: number, y: number) => void)—

Accessibility

It exposes group semantics, with aria-label, aria-pressed, aria-hidden and aria-live kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
EnterActivates the focused control.
SpaceActivates the focused control.
EscapeCloses or cancels, then returns focus to where it came from.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Surfaces examples