Popover

A small panel anchored to what opened it.

Default

A title, a sentence, and one field.

For a handful of controls that would crowd the page — a width, a date, a filter. It is placed against its trigger and moves out of its own way when the window edge is in the way, flipping to the other side rather than being cut off. It follows the trigger when the page scrolls.

Installation

npx philcn@latest add popover

The file is written into your project. It is yours from then on — change it as you like.

Examples

Placement

A preference rather than an order: it flips when there is no room.

Props

Prop	Type	What it does
Popover.open	boolean	Controlled: whether it is showing.
Popover.onOpenChange	((open: boolean) => void)	Called when it opens or closes.
PopoverContent.side	Side	Which side of the trigger it prefers.
PopoverContent.align	Align	How it lines up along that side.
PopoverContent.sideOffset	number	The gap between trigger and panel, in pixels.
PopoverContent.avoidCollisions	boolean	Whether it may move itself to stay on screen. On by default.

Types are read from the library itself, so this table cannot describe an option the code no longer has.

Worth knowing

A date picker is a Calendar inside one of these; a combobox is a Command inside one. Neither is a component of its own, here or at shadcn.