Component

Popover

Displays rich content in a portal, triggered by a button. Built on Radix UI Popover primitive.

Preview

Installation

pnpm dlx brutx@latest add popover

Usage

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverAnchor,
} from "@/components/ui/popover"
import { Button } from "@/components/ui/button"

<Popover>
  <PopoverTrigger asChild>
    <Button>Open</Button>
  </PopoverTrigger>
  <PopoverContent>
    Popover content here
  </PopoverContent>
</Popover>

Examples

Different Alignments

Use align prop to control horizontal alignment.

Different Sides

Use side prop to control which side the popover appears on.

Controlled Popover

Control popover state with open and onOpenChange.

With Form

Popover containing a form for inline editing.

API Reference

Popover

Root component that manages state.

Prop	Type	Default	Description
open	boolean	-	Controlled open state
onOpenChange	(open: boolean) => void	-	Callback when open state changes
defaultOpen	boolean	false	Initial open state (uncontrolled)

PopoverContent

The floating content container.

Prop	Type	Default	Description
align	"start" \| "center" \| "end"	"center"	Horizontal alignment relative to trigger
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	Which side to position on
sideOffset	number	8	Distance from trigger in pixels
alignOffset	number	0	Offset from alignment edge

All Exports

Component	Description
Popover	Root component
PopoverTrigger	Element that triggers popover
PopoverContent	Floating content container
PopoverAnchor	Custom anchor element for positioning

Accessibility

Enter / Space opens/closes popover
Escape closes the popover
Focus is managed automatically
Click outside closes the popover