Popover

Powered by

Base UIShadcn UIAnimate UIMotion

Installation

Positioning

Controlled

When to use

The Popover component displays rich content in a positioned overlay triggered by user interaction. Use this decision tree to determine when it's appropriate:

Usage

<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverContent>Popover Content</PopoverContent>
</Popover>

Examples

Date Picker Example

Props

Keyboard interactions

Accessibility

• PopoverTrigger exposes aria-expanded / aria-controls for the screen-reader state of the popover.
• PopoverContent is focusable and traps focus while open — pressing Tab past the last focusable control wraps back to the first.
• The trigger must be a real button (or another interactive element via asChild). Static <div> triggers lose focus behaviour.
• onOpenChange keeps the Radix-style (open: boolean) => void signature via the Base UI compat layer.

Controlled vs uncontrolled

Uncontrolled — the popover owns open state:

<Popover onOpenChange={(open) => console.log('open:', open)}>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>{/* ... */}</PopoverContent>
</Popover>

Controlled — drive open from parent state (e.g. to open the popover programmatically or close it after a form submission):

const [open, setOpen] = useState(false);

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger asChild>
    <Button onClick={() => undefined} variant="outline">Open</Button>
  </PopoverTrigger>
  <PopoverContent>
    <Button onClick={() => setOpen(false)}>Done</Button>
  </PopoverContent>
</Popover>

Credits

• We use Base UI for the popover component.
• We take our inspiration from Shadcn UI for the popover style.
• We use Animate UI from imskyleen for all the animations.