Popover

A floating panel anchored to a trigger element. Use for rich content like forms, menus, or additional details without leaving the current context.

Basic Popover

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open Popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="space-y-2">
      <h4 className="font-medium text-sm">Dimensions</h4>
      <p className="text-sm text-muted-foreground">
        Set the dimensions for the layer.
      </p>
    </div>
  </PopoverContent>
</Popover>

API Reference

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the popover.
`onOpenChange`	`(open: boolean) => void`	—	Callback fired when the open state changes.
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	The preferred side of the trigger to render the popover.
`align`	`"start" \| "center" \| "end"`	`"center"`	The preferred alignment against the trigger.