Popover
StorybookA floating panel anchored to a trigger element. Uses Floating UI for positioning with automatic flip and shift when near viewport edges.
Basic (Client-only)
Click the trigger to toggle the popover. Click outside or press Escape to dismiss. This is the classic shadcn "Dimensions" example.
Set the dimensions for the layer.
Alignments
Use align to control horizontal alignment:
"start", "center" (default),
"end".
This popover is aligned to the start.
This popover is aligned to the center.
This popover is aligned to the end.
Side Placement
Use side to place the popover on any side of the trigger.
The popover will flip to the opposite side if there isn't enough space.
This popover opens to the top.
This popover opens to the right.
This popover opens to the bottom.
This popover opens to the left.
Server-controlled
Server opens and closes the popover. Uses the
:if + show pattern.
show=false, result=nil