Popover

A glass panel of free content — a short form, a note — hanging off whatever opened it, titled for screen readers and capped to the room left on screen.

Full screen

01Preview

02Installation

npx shadcn@latest add https://aiellie.app/r/popover.json

03API reference

From the Base UI documentation

Groups all parts of the popover. Doesn't render its own HTML element.

Props

Prop	Type	Default	Description
defaultOpen	boolean	false	Whether the popover is initially open. To render a controlled popover, use the `open` prop instead.
open	boolean	-	Whether the popover is currently open.
onOpenChange	((open: boolean, eventDetails: Popover.Root.ChangeEventDetails) => void)	-	Event handler called when the popover is opened or closed.
actionsRef	React.RefObject<Popover.Root.Actions \| null>	-	A ref to imperative actions. `unmount`: Manually unmounts the popover. Call this after any externally controlled closing animation finishes.`close`: Closes the popover imperatively when called.
defaultTriggerId	string \| null	-	ID of the trigger that the popover is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.
handle	Popover.Handle<Payload>	-	A handle to associate the popover with a trigger. If specified, allows external triggers to control the popover's open state.
modal	boolean \| 'trap-focus'	false	Determines if the popover enters a modal state when open. `true`: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled.`false`: user interaction with the rest of the document is allowed.`'trap-focus'`: focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled. On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior. When `modal` is `true`, focus trapping is enabled only if `<Popover.Close>` is rendered inside `<Popover.Popup>`. It can be visually hidden with your own CSS if needed, such as Tailwind's `sr-only` utility. When `modal` is `'trap-focus'`, render `<Popover.Close>` inside `<Popover.Popup>` so touch screen readers can escape the popup.
onOpenChangeComplete	((open: boolean) => void)	-	Event handler called after any animations complete when the popover is opened or closed.
triggerId	string \| null	-	ID of the trigger that the popover is associated with. This is useful in conjunction with the `open` prop to create a controlled popover. There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set).
children	React.ReactNode \| PayloadChildRenderFunction<Payload>	-	The content of the popover. This can be a regular React node or a render function that receives the `payload` of the active trigger.