Popover

A popover with two consumption modes: a styled compound component for convenience, or a headless usePopover() hook for full rendering control.

Compound Component

Headless Hook

Use usePopover() when you need complete control over the markup and styling.

Placement

Use the placement prop to control where the popover appears relative to the trigger.

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the popover is open (controlled).
`defaultOpen`	`boolean`	`false`	The initial open state (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`placement`	`"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"`	`"bottom"`	Placement of the popover relative to the trigger.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for focus rings.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}
`--mantle-hover`	`CSS variable`	`gradient`	Override the hover background via style. Set to "none" to disable. e.g. style={{ "--mantle-hover": "none" }}

open

boolean

Whether the popover is open (controlled).

defaultOpenfalse

boolean

The initial open state (uncontrolled).

onOpenChange

(open: boolean) => void

Called when the open state changes.

placement"bottom"

"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"

Placement of the popover relative to the trigger.

color"blue"

Accent color for focus rings.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

--mantle-hovergradient

CSS variable

Override the hover background via style. Set to "none" to disable. e.g. style={{ "--mantle-hover": "none" }}