Sticker Popover
A panel anchored to its trigger, on Radix Popover, with the die-cut edge and the glow. Exports STICKER_SURFACE so a stock shadcn menu can wear the same edge.
SurfacesClient component@radix-ui/react-popover
Preview
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/sticker-popoverPulls in @duck/theme. Already installed items are skipped.
Usage
import { StickerPopover, StickerPopoverRoot, StickerPopoverTrigger, StickerPopoverContent, StickerPopoverClose, StickerPopoverAnchor } from "@/components/ui/sticker-popover"The file lands in components/ui/sticker-popover.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 |
|---|---|---|---|
| content | React.ReactNode | - | The panel. Anything too big for a tooltip that does not warrant a dialog. |
| side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side. Radix flips it when there is no room. |
| align | "start" | "center" | "end" | "center" | Alignment along that side. Use start when the panel is wider than its trigger. |
| sideOffset | number | 10 | Pixels between trigger and panel. Room for the arrow. |
| arrow | boolean | true | Draw the pointer back at the trigger. |
| holo | boolean | false | Iridescent ring instead of the solid die-cut edge. |
| contentClassName | string | - | Sizing for the panel, which is w-72 and p-4 until told otherwise. |
| children | React.ReactNode | - | The control that opens it. Rendered as the trigger, so it must forward props. |
Rules
What keeps this component from turning into noise.
- A popover is not a menu: no roving focus, no typeahead, no menuitem roles. Every control inside is its own tab stop. For exclusive choices use StickerToggleGroup; for a real menu use shadcn DropdownMenu.
- To make a stock shadcn overlay match the edge, append the exported recipe: `className={cn(STICKER_SURFACE, "p-1")}` on DropdownMenuContent, SelectContent or PopoverContent. It carries radius, fill, the 3px border and the glow, and nothing geometric — padding and width stay with the component being restyled.
- STICKER_SURFACE is what StickerPopoverContent itself wears, so the documented recipe cannot drift from the component.
- The all-in-one StickerPopover is a trigger and a panel. Compose the parts when the panel needs its own close button, an anchor that is not the trigger, or a controlled open.
- The panel rises into place on the top and bottom sides and only fades on the left and right; both directions end at the resting state, so reduced motion shows the panel in place rather than frozen mid-arrival.