Popover

A small floating panel anchored to its trigger.

Default

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>Dimensions</PopoverTrigger>
  <PopoverContent className="w-64">
    <Label htmlFor="width">Width</Label>
    <Input id="width" defaultValue="100%" />
  </PopoverContent>
</Popover>

Align

<PopoverContent align="start">…</PopoverContent>
<PopoverContent align="center">…</PopoverContent>
<PopoverContent align="end">…</PopoverContent>

align pins the popup to the start, center, or end edge of the trigger.

Markdown for agents: /design/popover.md · spec: /design.md