Popover

Anchored popover. Comes with default padding and themed background.

Examples

Basic

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline" leftIcon={<Zap size={16} />}>Open</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <h4 className="font-medium">Title</h4>
    <p className="text-sm text-muted-foreground mt-1">Description</p>
  </PopoverContent>
</Popover>

API Reference

Props of the Popover component.

Prop	Type	Default	Description
`align`	`'start' \| 'center' \| 'end'`	`'center'`	On PopoverContent.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	—
`sideOffset`	`number`	`4`	—
`className`	`string`	—	Override the content classNames.