Component

Popover

Anchor contextual content to a trigger with collision-aware positioning, outside dismissal, and automatic focus restoration.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Popover } from "@chitrank2050/monoline-ui/popover"

Basic usage

<Popover>
  <Popover.Trigger asChild>
    <Button variant="secondary">Project details</Button>
  </Popover.Trigger>
	<Popover.Content side="bottom" align="start">
	<p className="ml-eyebrow">Deployment · Production</p>
    <p>Last deployed 8 minutes ago.</p>
    <Popover.Arrow />
  </Popover.Content>
</Popover>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Popover places contextual controls or supporting information beside a trigger without blocking the rest of the page.

Avoid when

The task must be modal, the content is only a short text hint, or the information should remain visible in the document.

Accessibility

Popover manages outside dismissal, Escape, collision positioning, and focus return. Its trigger needs a clear accessible name and its content needs a logical focus order.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

openbooleanControlled open state

defaultOpenbooleanInitial uncontrolled state

onOpenChange(open) => voidRuns whenever open state changes

Popover.Triggercompound slotControl that opens the popover

Popover.Anchorcompound slotOptional positioning anchor separate from the trigger

Popover.Contentcompound slotPositioned contextual surface

side"top" | "right" | "bottom" | "left"Preferred placement; flips automatically when space is limited

align"start" | "center" | "end"Alignment along the chosen side

collisionBoundaryElement | Element[]Optional clipping boundary; defaults to the viewport

collisionPaddingnumber | SideObjectMinimum space from the collision boundary; defaults to 12px

Popover.Closecompound slotControl that closes the popover

Popover.Arrowcompound slotOptional arrow toward the anchor

Design tokens

Theme variables this component reads for color, spacing, and motion.

--popoverCSS varPopover surface

--borderCSS varFloating boundary

--shadow-mdCSS varFloating elevation

--z-dropdownCSS varOverlay order

Implementation

The source used by the example above, including any state it needs.

<Popover>
  <Popover.Trigger asChild>
    <Button variant="secondary">Project details</Button>
  </Popover.Trigger>
	<Popover.Content side="bottom" align="start">
	<p className="ml-eyebrow">Deployment · Production</p>
    <p>Last deployed 8 minutes ago.</p>
    <Popover.Arrow />
  </Popover.Content>
</Popover>

Compare related components or review the package and theme setup.

01ComponentDialogComponent · ReferenceReference→02ComponentTooltipComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview