Sticker Dialog
The sticker lifted off the page. Radix Dialog underneath, so the focus trap, scroll lock and aria wiring are real; duck supplies the frosted scrim and the rise into place.
SurfacesClient component@radix-ui/react-dialoglucide-react
Preview
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/sticker-dialogPulls in @duck/theme. Already installed items are skipped.
Usage
import { StickerDialog, StickerDialogTrigger, StickerDialogClose, StickerDialogPortal, StickerDialogOverlay, StickerDialogContent, StickerDialogHeader, StickerDialogTitle, StickerDialogDescription, StickerDialogFooter } from "@/components/ui/sticker-dialog"The file lands in components/ui/sticker-dialog.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| holo | boolean | false | On StickerDialogContent: iridescent ring instead of the die-cut edge. |
| hideClose | boolean | false | Drop the built-in close button. Escape and the overlay still dismiss unless you intercept them too. |
| closeLabel | string | "Close" | Accessible name for the close button. |
Rules
What keeps this component from turning into noise.
- Always render a StickerDialogTitle. Radix warns without one, and a modal with no accessible name is announced as nothing.
- hideClose is for a blocking decision only — a dialog the user cannot leave except through your own buttons.
- No idle animation inside a dialog. It already interrupted the page; it does not also get to fidget.