ns-ui / loud
A vinyl sticker you can actually peel — drag a corner and the printed face lifts on a moving fold line, exposing a pale adhesive underside with a sweeping specular sheen; release early and it re-sticks with one slappy flap, drag past 70% and it tears free, flutters under air resistance, and re-adheres where dropped.
Use when a peelable object where the peel is the interaction, dragging a corner to lift the printed face off its adhesive underside, re-sticking below 70% travel and tearing free above it; it is the wrong choice for dismissing a notice that should stay recoverable (banner-tear-stub leaves a stub that reopens it) and for removing a chip from a field (tag-input-tear tears along a perforation and closes the gap behind it).
Install
npx shadcn add https://design.helpmarq.comns-ui / sticker-peel
Drag a corner to peel, or hold Space — release past 70% and the decal tears free, flutters, and re-adheres where it lands.
| Prop | Type | Default | Description |
|---|---|---|---|
| demo? | boolean | — | Self-driving mode for gallery screenshots: an internal script peels to ~40% (re-stick), then ~90% (tear + flutter + resettle) on a loop, using the same progress/release code paths as real input, and pauses itself whenever a real pointer or keyboard interaction is active. |
| className? | string | — | — |
| aria-label? | string | — | — |