On this page

Popover

A floating panel anchored to a trigger element.

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

pnpm add @ninna-ui/overlays@latest

Includes @ninna-ui/core. CSS setup required.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.

Live preview/ Default

Placements

Position the popover on any side of the trigger element.

Live preview/ Default

Alignment

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

Live preview/ Default

With Arrow

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

Live preview/ Default

Rich Content

Popovers can contain rich layouts like user profiles and cards.

Live preview/ Default

Focus Control

Prevent the default open autofocus when a live results popover should keep focus on its search input.

Live preview/ Default

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
`onOpenAutoFocus`	`(event: Event) => void`	`—`	Callback before focus moves into the popover; prevent the event to keep the current focus
`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
Prevent onOpenAutoFocus to keep focus on the current element
Escape key dismisses the popover
Clicking outside the popover dismisses it
Tab and Shift+Tab navigate focusable elements within the popover