Popover

Overlay

Rich content that floats above a trigger on click.

Popovers display non-critical content near a trigger. Built on the Base UI Popover primitive with smart collision handling and focus management.

npx shadcn@latest add popover

Form popover

A popover containing form controls, opened on click.

Preview

Live

tsx

1<Popover>
2  <PopoverTrigger render={<Button variant="outline">Open popover</Button>} />
3  <PopoverContent>
4    <PopoverTitle>Dimensions</PopoverTitle>
5    <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
6    <Label htmlFor="popover-width">Width</Label>
7    <Input id="popover-width" defaultValue="100%" />
8  </PopoverContent>
9</Popover>

Alignment

Control placement with align and sideOffset props on the content.

Preview

Live

tsx

1<Popover>
2  <PopoverTrigger render={<Button variant="outline">Open popover</Button>} />
3  <PopoverContent align="start" sideOffset={4}>
4    <PopoverTitle>Aligned start</PopoverTitle>
5  </PopoverContent>
6</Popover>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
align	"start" \| "center" \| "end"= "center"	Alignment of the popover relative to the trigger.
sideOffset	number= 8	Distance in pixels between trigger and popover.
open	boolean= false	Controlled open state.
modal	boolean= false	Whether the popover is modal.