Popover

Overlay

An accessible popup anchored to a button. A high-quality, unstyled React popover component that displays content in a floating panel.

Installation

bash

1npx @dinachi/cli@latest add popover

Run the CLI command above to automatically install the component and its dependencies.

A basic popover with title and description

A popover with a close button and interactive content

Popovers can be positioned on different sides

A popover that opens on hover

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Whether the popover is initially open
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes
`modal`	`boolean \| 'trap-focus'`	`false`	Whether to enter modal mode
`openOnHover`	`boolean`	`false`	Open popover on hover
`delay`	`number`	`300`	Hover delay in milliseconds
`closeDelay`	`number`	`0`	Close delay in milliseconds
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	Preferred side
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment relative to trigger
`sideOffset`	`number`	`8`	Distance from trigger in pixels