Popover

Organism

Anchor-based contextual panel. Closes on outside click (capture-phase pointerdown) and Escape, layered with sibling overlays. Supports top/bottom/left/right placement. Built-in focus trap (focusTrap prop) keeps Tab cycling inside the panel.

Preview

Code

<Popover trigger={<Button variant="outline">Open</Button>} placement="bottom">
  <div className="p-4">
    <p className="text-sm font-semibold">Title</p>
    <p className="text-xs text-text-secondary">Content goes here.</p>
  </div>
</Popover>

Preview

Code

<Popover placement="top" trigger={<Button>Top</Button>}><div>...</div></Popover>
<Popover placement="right" trigger={<Button>Right</Button>}><div>...</div></Popover>

Preview

Code

<Popover focusTrap placement="bottom" trigger={<Button>Quick edit</Button>}>
  <form onSubmit={(e) => e.preventDefault()} className="p-4 space-y-3 w-64">
    <input type="text" placeholder="Title" />
    <input type="text" placeholder="Tag" />
    <Button type="submit">Save</Button>
  </form>
</Popover>

Popover

Bottom (default)

Placements

Focus trap inside Popover