Popover

A click-triggered, non-modal floating panel anchored to its trigger. Focus moves in on open but is never trapped; Escape and outside clicks close it.

Installation

npx dafink-ui add popover

Demo

Props

Name	Type	Default	Description
trigger	ReactNode	-	Content of the built-in trigger button.
children	ReactNode	-	Panel content. May contain interactive elements.
side	'top' \| 'right' \| 'bottom' \| 'left'	'bottom'	Which side of the trigger the panel appears on.
align	'start' \| 'center' \| 'end'	'center'	Alignment along the chosen side.
label	string	undefined	Accessible name for the panel (aria-label).
onOpenChange	(open: boolean) => void	undefined	Called whenever the popover opens or closes.
disabled	boolean	false	Disables the trigger.
className	string	''	Additional classes on the panel.
triggerClassName	string	''	Additional classes on the trigger button.

Accessibility

Popover is a non-modal floating panel (role="dialog", no aria-modal) with no focus trap. On open, focus moves to the first focusable element inside the panel (or the panel itself if empty). Tab is never intercepted: it walks through the panel's own content, and once focus leaves the panel entirely (Tab, Shift+Tab, or an outside click) a blur/pointerdown handler closes it without pulling focus back. Escape is the one path that both closes it and returns focus to the trigger.

Key	Function
`escape`	Closes the popover and returns focus to the trigger.
`tab`	Moves through the panel's focusable content; once focus leaves the panel it closes without stealing focus back.
`shift`+`tab`	Same as Tab, in reverse.
`enter`	Toggles the popover from the trigger button (native activation).