Browse components
Sticker Peel
A glossy sticker whose corner curls back on hover and follows your drag, showing its paper back and a soft lifted shadow.
Installation
npx shadcn@latest add @glint-ui/sticker-peelFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/sticker-peel.json
Usage
import { StickerPeel } from "@/components/ui/sticker-peel";
<StickerPeel radius={28}>
<div className="size-64 rounded-[28px] bg-lime-300" />
</StickerPeel>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The sticker face. Should fill the box. |
| corner | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-right" | Corner that lifts. |
| restPeel | number | 18 | Px the corner is lifted at rest, as a hint. |
| hoverPeel | number | 90 | Px the corner lifts on hover or focus. |
| backColor | string | "#f4f4f5" | Color of the sticker's paper back. |
| radius | number | 28 | Corner radius in px; match your face. |
| label | string | "Sticker. Press Enter to peel" | Accessible name. |
| className | string | — | Extra classes for the root element. |