012
Popover
OverlayClosed
Customize
Side
Align
Trigger
Code
<Popover>
<PopoverTrigger>Filters</PopoverTrigger>
<PopoverContent>
…
<PopoverClose>Done</PopoverClose>
</PopoverContent>
</Popover>Install
npx shadcn@latest add https://components.haedong.dev/r/popover.json
Props
Popover props below. PopoverTrigger is a muted text button (or your own element with asChild); PopoverContent takes side / align; PopoverClose is a muted text button (children = label). Positioned by absolute offsets from the trigger, so it follows layout without measuring.
| Prop | Type | Description |
|---|---|---|
| open / defaultOpen | boolean | Visibility (controlled / uncontrolled). |
| onOpenChange | (open: boolean) => void | Called on trigger click, outside click, Esc, focus leaving or PopoverClose. |
| PopoverContent.side | "bottom" | "top" | Which side of the trigger. Defaults to "bottom". |
| PopoverContent.align | "start" | "center" | "end" | Horizontal alignment to the trigger. Defaults to "start". |
| PopoverTrigger.asChild | boolean | Use the single child element (e.g. a Button) as the trigger. |