Popover

An overlay that displays additional information or options when triggered.

Installation


pnpm dlx shadcn@latest add @shark-ui/popover

Usage


import { 
  Popover, 
  PopoverTrigger, 
  PopoverContent, 
  PopoverHeader,
  PopoverTitle, 
  PopoverDescription,
  PopoverBody,
  PopoverFooter,
  PopoverClose,
} from "@/components/ui/popover";


<Popover>
  <PopoverTrigger />
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle />
      <PopoverDescription />
    </PopoverHeader>
    <PopoverBody>
      {/* Your content here */}
    </PopoverBody>
    <PopoverFooter>
      <PopoverClose />
    </PopoverFooter>
  </PopoverContent>
</Popover>

Title and Description

You can use <PopoverHeader /> in two ways:

Using props

You can pass title and description props directly to <PopoverHeader />. In this case, you don't need to use <PopoverTitle /> and <PopoverDescription /> components.


<PopoverHeader title="Popover Title" description="Popover description" />

Using components

Alternatively, you can use <PopoverTitle /> and <PopoverDescription /> as children for more control.


<PopoverHeader>
  <PopoverTitle>Popover Title</PopoverTitle>
  <PopoverDescription>Popover description</PopoverDescription>
</PopoverHeader>

Positioning

Control the position of the popover relative to the trigger using the positioning prop.

Examples

To make the popover non-modal, set the modal prop to false.

In some cases, you might want the popover to not trap focus or block interaction with the rest of the page.

Nested

Nest popovers within one another.

Anchor

Use <PopoverAnchor /> to position the popover relative to a different element than the trigger.

Close button

Use showCloseButton prop to show a close button in the top-right corner.

Close behavior

Use closeOnInteractOutside and closeOnEscape props to prevent closing on outside click and escape.

Scroll area

Make the content area scrollable while keeping header and footer fixed using ScrollArea.

Inside dialog

Render a popover inside a dialog.

API Reference

Root element of the popover.

Prop	Type	Default
`open`	`boolean`	—
`defaultOpen`	`boolean`	—
`onOpenChange`	`(details: OpenChangeDetails) => void`	—
`positioning`	`PositioningOptions`	—
`modal`	`boolean`	`true`
`closeOnInteractOutside`	`boolean`	`true`
`closeOnEscape`	`boolean`	`true`
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`

PopoverTrigger

Button that opens the popover. Renders a button.

Prop	Type	Default
`asChild`	`boolean`	—

PopoverAnchor

Element the popover is positioned relative to. Use when the reference is not the trigger.

Prop	Type	Default
`asChild`	`boolean`	—

PopoverContent

Container for the popover content. Renders a div inside a portal.

Prop	Type	Default
`showCloseButton`	`boolean`	`false`
`className`	`string`	—

PopoverHeader

Header container. Accepts title and description props or children.

Prop	Type	Default
`title`	`string`	—
`description`	`string`	—
`className`	`string`	—

PopoverTitle

Title element. Renders a div (Ark: accessible title).

Prop	Type	Default
`asChild`	`boolean`	—
`className`	`string`	—

PopoverDescription

Description element. Renders a div (Ark: accessible description).

Prop	Type	Default
`asChild`	`boolean`	—
`className`	`string`	—

PopoverBody

Content area. Wrapped in ScrollArea. Renders a div.

Prop	Type	Default
`className`	`string`	—

PopoverFooter

Footer container. Renders a div.

Prop	Type	Default
`className`	`string`	—

PopoverClose

Button that closes the popover. Renders a button.

Prop	Type	Default
`asChild`	`boolean`	—

PopoverArrow

Arrow pointing to the trigger. Renders a div. Optional.

Prop	Type	Default
`className`	`string`	—

For a complete list of props and more information, see the Ark UI Popover documentation.