Popover

A floating content panel anchored to a trigger, built on Radix UI's Popover primitive with portal rendering and smooth animations.

Install

npx shadcn@latest add https://atomx.acau.net/r/popover.json

Usage

Wrap a trigger in PopoverTrigger and put panel content in PopoverContent. The panel is rendered in a portal so it escapes overflow containers. Use align and sideOffset to control positioning.

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Popover content here.</p>
  </PopoverContent>
</Popover>

Preview

Props

Popover extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>.

Prop	Type	Notes
`open`	`boolean`	Controlled open state.
`defaultOpen`	`boolean`	Initial state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	Fired when open state changes.

PopoverContent extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>.

Prop	Type	Notes
`align`	`"start" \| "center" \| "end"`	Horizontal alignment relative to the trigger. Defaults to `"center"`.
`sideOffset`	`number`	Gap in pixels between trigger and panel. Defaults to `4`.
`side`	`"top" \| "right" \| "bottom" \| "left"`	Preferred opening side.
`className`	`string`	Use to override width.

Popover

Install

Usage

Preview

Props

On this page