Popover
Click-triggered popover with side and alignment options; closes on outside click or Esc and restores focus.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
PopoverProps
Also accepts all props of Omit<React.ComponentProps<"div">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger* required | React.ReactNode | — | — |
| children* required | React.ReactNode | — | Panel content |
| side | "top" | "bottom" | "bottom" | — |
| align | "start" | "center" | "end" | "center" | — |
| width | number | 288 | Panel width in px |
| panelLabel | string | — | Accessible name of the panel |
| triggerClassName | string | — | — |
| open | boolean | — | — |
| defaultOpen | boolean | false | — |
| onOpenChange | (open: boolean) => void | — | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/popover.json