KQ-1412 · PEEL/LABEL

Peel Label

A paper label over any content whose fold is real geometry: the fold line is the perpendicular bisector of the corner and the tip under your finger, the face is clipped beyond it, and the corner's half is reflected across it — curled, liner-pale, shaded at the crease and casting a shadow that deepens as it lifts. Released short of halfway it falls back on a spring between springs.snap and springs.recoil that takes the throw, slapping flat and popping back to its dog-ear; past halfway the fold runs across the label on springs.glide and the sheet leaves, and putting it back rolls it on and lands it on springs.recoil. The corner is a slider: arrows peel a step at a time, End or Enter lifts it off, Home or Escape lays it back, and Enter on a bared label puts it back.

KQ-1412 · PEEL/LABEL

Coldbrook · gift card

$50.00

Your code

CBK-7Q4M-2HX9

label sealed · drag its corner

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/peel-label

Props

children: ReactNode; default —; What the label covers, revealed when it comes off. It also sizes the label.
label: ReactNode; default a "Peel to reveal" face; The label's printed face. Presentational: the back shows it mirrored.
corner: "top-left" | "top-right" | "bottom-left" | "bottom-right"; default "bottom-right"; The corner that stands up and is lifted.
curl: number; default 0.5; How much the lifted paper rolls rather than folding flat, 0 to 1: a broader, brighter crease and more sheet off the surface.
shadow: number; default 0.5; Depth of the shadow under the lifted paper, 0 to 1.
threshold: number; default 0.5; Share of the corner-to-corner pull past which a release (with the throw projected) lifts the label off.
dogEar: number; default 14; How far the corner stands up at rest, in px; 0 lays it flat.
bounce: number; default 0.5; How lively the fall back is: 0 settles on the snap spring, 1 bounces on the recoil spring.
step: number; default 0.125; How far one arrow key peels, as a share of the pull.
color: string; default "oklch(from var(--accent-bright) 0.94 0.035 h)"; The face's paper, any CSS colour; a pigment so it reads the same in both themes.
backColor: string; default "oklch(from var(--accent-bright) 0.985 0.008 h)"; The back of the label, its liner side.
ink: string; default "oklch(from var(--accent-bright) 0.38 0.1 h)"; Ink for the printed face and its perforated rule.
showThrough: number; default 0.1; How much of the print shows through the back, mirrored, 0 to 1.
radius: number; default 10; Corner radius of the label, px.
intro: boolean; default true; Lift the corner once, as an invitation, the first time it comes into view.
peeled / defaultPeeled: boolean; default — / false; Whether the label is off, controlled or uncontrolled.
onPeeledChange: (peeled: boolean) => void; default —; Fires from the release, key or press that took the label off or put it back.
onProgressChange: (progress: number) => void; default —; Fires as the visitor peels, with how far, 0 to 1 (two decimals).
handleLabel: string; default "Peel the label"; The corner handle's accessible name.
disabled: boolean; default false; Holds the label down: no drag, no keys.
sound: boolean; default false; Play the paper's sounds: a crinkle when the corner is taken and as the adhesive lets go, a brighter one when it comes off, a soft one when it lands back.
className: string; default —; Classes for the box; the children size it.

Prop	Type	Default	Description
children	ReactNode	—	What the label covers, revealed when it comes off. It also sizes the label.
label	ReactNode	a "Peel to reveal" face	The label's printed face. Presentational: the back shows it mirrored.
corner	"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"	"bottom-right"	The corner that stands up and is lifted.
curl	number	0.5	How much the lifted paper rolls rather than folding flat, 0 to 1: a broader, brighter crease and more sheet off the surface.
shadow	number	0.5	Depth of the shadow under the lifted paper, 0 to 1.
threshold	number	0.5	Share of the corner-to-corner pull past which a release (with the throw projected) lifts the label off.
dogEar	number	14	How far the corner stands up at rest, in px; 0 lays it flat.
bounce	number	0.5	How lively the fall back is: 0 settles on the snap spring, 1 bounces on the recoil spring.
step	number	0.125	How far one arrow key peels, as a share of the pull.
color	string	"oklch(from var(--accent-bright) 0.94 0.035 h)"	The face's paper, any CSS colour; a pigment so it reads the same in both themes.
backColor	string	"oklch(from var(--accent-bright) 0.985 0.008 h)"	The back of the label, its liner side.
ink	string	"oklch(from var(--accent-bright) 0.38 0.1 h)"	Ink for the printed face and its perforated rule.
showThrough	number	0.1	How much of the print shows through the back, mirrored, 0 to 1.
radius	number	10	Corner radius of the label, px.
intro	boolean	true	Lift the corner once, as an invitation, the first time it comes into view.
peeled / defaultPeeled	boolean	— / false	Whether the label is off, controlled or uncontrolled.
onPeeledChange	(peeled: boolean) => void	—	Fires from the release, key or press that took the label off or put it back.
onProgressChange	(progress: number) => void	—	Fires as the visitor peels, with how far, 0 to 1 (two decimals).
handleLabel	string	"Peel the label"	The corner handle's accessible name.
disabled	boolean	false	Holds the label down: no drag, no keys.
sound	boolean	false	Play the paper's sounds: a crinkle when the corner is taken and as the adhesive lets go, a brighter one when it comes off, a soft one when it lands back.
className	string	—	Classes for the box; the children size it.