A floating panel for contextual UI, with flexible sizing, hover triggers, a controllable open state and nesting.

import { Popover } from "@plexui/ui/components/Popover";

Examples

Overview

Open on hover

Using the controller

Nesting

All floating UI components in Plex UI can be infinitely nested by relying on z-index: auto; and natural stacking order.

Additionally, esc keypresses are handled independently as a stacking order.

API

Popover (root)

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state; uncontrolled when omitted
`onOpenChange`	`(nextState: boolean) => void`	—	Called when the popover opens or closes
`showOnHover`	`boolean`	`false`	Open on hover and focus instead of click
`hoverOpenDelay`	`number`	`150`	Delay before a hover popover opens (ms)

Popover.Trigger: Renders the element that toggles the popover. The trigger should be the user's point of interaction for revealing the popup. No specific props.

Popover.Content

Prop	Type	Default	Description
`width`	`number \| "auto"`	`"auto"`	Panel width in px
`minWidth`	`number \| "auto"`	`300`	Minimum panel width in px
`maxWidth`	`number`	`700`	Maximum panel width in px, capped by the space available in the viewport
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Preferred placement; flips when it collides
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to trigger
`sideOffset`	`number`	`8`	Offset from trigger (px)
`alignOffset`	`number`	`-5`	Offset from the start or end alignment (px)
`avoidCollisions`	`boolean`	`true`	Reposition to stay inside the viewport and scroll containers
`translucent`	`boolean`	`false`	Translucent, blurred surface
`autoFocus`	`boolean`	`true`	Move focus into the panel when it opens (hover popovers never take focus)
`className`	`string`	—	Applied to the panel

usePopoverController(): Hook available inside Popover.Content. Returns { close: () => void, shake: () => void }.

Styling

Popover reads these component tokens. Override them at any scope to restyle it:

--popover-radius: radius (default var(--radius-xl))

TooltipBrief informative text shown on hover or focus, for any trigger element, with conditional enabling and a compact variant.MenuDropdown menu for structured actions with grouped items, submenus, checkbox and radio items, and horizontal layouts.DialogModal dialog for confirmations, forms, and destructive alerts, with a focus trap, escape handling, and an overlay scrim.

Popover