components

Popover

Popovers are for interactive content — inputs, filters, tool settings. If the panel is just a few words of help, you want a Tooltip.

Read the full spec

Default — settings mini-form

Classic use case: a compact settings popover triggered from a button. Focus moves into the panel on open, returns to the trigger on close.

tsx

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline"><Settings2 /> Display</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="grid gap-3">
      <Label htmlFor="rows">Rows per page</Label>
      <Input id="rows" defaultValue="25" />
    </div>
  </PopoverContent>
</Popover>

Alignment

Use `align` to anchor the popover — `start`, `center` (default) or `end` — and `side` to flip top/right/bottom/left.

tsx

<PopoverContent side="top" align="end">…</PopoverContent>

Controlled

Drive the popover from state when you need to close it after a successful submit, or open it in response to an event.