Popover

Displays rich content in a portal, triggered by a button.

Basic Popover

A popover with a form layout containing labeled inputs.

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open Popover</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="space-y-4">
      <div className="space-y-1">
        <h4 className="text-sm font-semibold">Title</h4>
        <p className="text-sm text-muted-foreground">
          Lorem ipsum dolor sit amet consectetur.
        </p>
      </div>
      <div className="grid gap-3">
        <div className="grid grid-cols-[1fr_2fr] items-center gap-4">
          <label className="text-sm">Label</label>
          <Input placeholder="Input" />
        </div>
        {/* Repeat for additional fields */}
      </div>
    </div>
  </PopoverContent>
</Popover>

Placement

Control the side and alignment of the popover relative to the trigger.

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Top</Button>
  </PopoverTrigger>
  <PopoverContent side="top">
    <p className="text-sm">This popover appears on top.</p>
  </PopoverContent>
</Popover>

Web3: Token Settings

Configure token parameters using a popover form.

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Slippage Settings</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="space-y-4">
      <div className="space-y-1">
        <h4 className="text-sm font-semibold">Transaction Settings</h4>
        <p className="text-sm text-muted-foreground">
          Configure your swap parameters.
        </p>
      </div>
      <div className="grid gap-3">
        <div className="grid grid-cols-[1fr_2fr] items-center gap-4">
          <label className="text-sm">Slippage</label>
          <Input placeholder="0.5%" />
        </div>
        <div className="grid grid-cols-[1fr_2fr] items-center gap-4">
          <label className="text-sm">Deadline</label>
          <Input placeholder="30 min" />
        </div>
      </div>
    </div>
  </PopoverContent>
</Popover>

API Reference

Prop	Type	Default	Description
open	boolean	—	Controlled open state
defaultOpen	boolean	false	Initial open state for uncontrolled usage
onOpenChange	(open: boolean) => void	—	Callback when open state changes
side	"top" | "right" | "bottom" | "left"	"bottom"	Preferred side of the trigger to render
align	"start" | "center" | "end"	"center"	Preferred alignment against the trigger
sideOffset	number	4	Distance from the trigger in pixels

Accessibility

The Popover component follows WAI-ARIA popover patterns:

• Focus is moved into the popover when opened
• Escape key closes the popover
• Click outside closes the popover
• Focus returns to trigger when closed