Popover

A floating panel anchored to a trigger element, used to display rich content like forms, menus, or additional information.

View Source

#Installation

npx @dinachi/cli@latest add popover

#Usage

tsx

import {
  Popover,
  PopoverTrigger,
  PopoverPortal,
  PopoverBackdrop,
  PopoverContent,
  PopoverArrow,
  PopoverTitle,
  PopoverDescription,
  PopoverClose,
} from '@/components/ui/popover'

#Examples

Default Popover

A basic popover with title and description

Popover with Close Button

A popover with a close button and interactive content

Popover Positions

Popovers can be positioned on different sides

Hover Popover

A popover that opens on hover

#API Reference

Prop	Type	Default	Description
defaultOpen	boolean	false	The initial open state when uncontrolled.
open	boolean	—	The controlled open state of the popover.
onOpenChange	(open: boolean) => void	—	Callback fired when the open state changes.
PopoverContent.portal	boolean	true	Whether to render in a portal. Set to false inside Dialog or Drawer.
PopoverContent.side	'top' \| 'right' \| 'bottom' \| 'left'	'bottom'	Preferred side for the popover popup.
PopoverContent.align	'start' \| 'center' \| 'end'	'center'	Preferred alignment relative to the trigger.
PopoverContent.sideOffset	number	8	Distance in pixels between trigger and popup.