Popover · Manti UI

Pass a React element as trigger and the panel body as children. The machine manages placement, focus, and dismissal.

import { Button, Popover } from '@manti-ui/react';

export default function PopoverBasic() {
  return (
    <Popover
      trigger={<Button variant="secondary">Tips</Button>}
      title="Dough resting"
    >
      Let the dough rest, covered, for 30 minutes. It relaxes the gluten so you
      can roll it paper-thin without it springing back.
    </Popover>
  );
}

Placement

placement anchors the panel to a side of the trigger, optionally aligned to its start or end edge. It defaults to bottom, and the machine flips the panel when there is not enough room on the requested side.

Close button

Set showCloseButton to add an internal dismiss control.

API

Prop	Type	Default	Description
`trigger`	`ReactElement`	—	Element that toggles the popover. Cloned with the machine's trigger props.
`title`	`ReactNode`	—	Optional heading rendered at the top of the panel.
`children`	`ReactNode`	—	Panel content.
`placement`	`Placement`	`'bottom'`	Placement relative to the trigger.
`showCloseButton`	`boolean`	`false`	Show the corner close button.
`modal`	`boolean`	—	Make the popover modal (trap focus, block outside interaction).
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	—	Called whenever the open state changes.
`closeOnInteractOutside`	`boolean`	`true`	Close when clicking outside the content.
`closeOnEscape`	`boolean`	`true`	Close when pressing Escape.

Styling

Anatomy

Part	Selector	Description
`positioner`	`[data-scope="popover"][data-part="positioner"]`	The portalled wrapper that positions the panel.
`content`	`[data-scope="popover"][data-part="content"]`	The translucent floating panel.
`title`	`[data-scope="popover"][data-part="title"]`	The optional heading.
`description`	`[data-scope="popover"][data-part="description"]`	The panel body content.
`close-trigger`	`[data-scope="popover"][data-part="close-trigger"]`	The optional corner close button.

Tokens

Token	Controls
`--manti-popover-max-width`	max width
`--manti-popover-z-index`	z index

Last updated 13 September 2026