Popover

A floating panel anchored to a trigger element.

import { Popover } from "@ninna-ui/overlays"

pnpm add @ninna-ui/overlays

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Popover component in your application.

import { Popover } from "@ninna-ui/overlays";
import { Button , Code } from "@ninna-ui/primitives";

export default function Example() {
  return (
    <Popover>
      <Popover.Trigger asChild>
        <Button variant="outline">Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <p>Popover content here</p>
        <Popover.Arrow />
      </Popover.Content>
    </Popover>
  );
}

Basic

A basic popover with title and description.

Placements

Position the popover on any side of the trigger element.

Alignment

Align the popover to the start, center, or end of the trigger.

With Arrow

Add an arrow pointer to visually connect the popover to its trigger.

Rich Content

Popovers can contain rich layouts like user profiles and cards.

API Reference

Complete list of props for the Popover component and its sub-components.

Popover (Root)

Prop	Type	Default	Description
`children*`	`ReactNode`	-	Popover content (Trigger, Content, etc.)
`open`	`boolean`	-	Controlled open state
`defaultOpen`	`boolean`	`false`	Default open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`modal`	`boolean`	`false`	Whether the popover is modal

Popover.Content

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Which side to place the popover
`sideOffset`	`number`	`4`	Distance from trigger in pixels
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment along the side
`avoidCollisions`	`boolean`	`true`	Whether to avoid collisions with viewport boundary
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	-	Callback when Escape key is pressed
`onPointerDownOutside`	`(event: Event) => void`	-	Callback when pointer clicks outside content
`onFocusOutside`	`(event: Event) => void`	-	Callback when focus moves outside content
`className`	`string`	-	Additional CSS classes

Popover.Trigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element instead of wrapping button

Popover.Arrow

Prop	Type	Default	Description
`width`	`number`	`10`	Width of the arrow in pixels
`height`	`number`	`5`	Height of the arrow in pixels

Popover.Close

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element instead of default close button

Accessibility

Popover content is associated with trigger via aria-controls
Focus moves to content when opened and returns to trigger when closed
Escape key dismisses the popover
Clicking outside the popover dismisses it
Arrow keys navigate focusable elements within the popover