Sections

Utilities

Popover

Overlay with extra info or options on trigger.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/popover.json

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

<PopoverHeader /> supports two usage patterns:

Using props

Pass title and description props directly to <PopoverHeader />.

This approach does not require <PopoverTitle /> or <PopoverDescription /> components.


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

Using components

Alternatively, 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.

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.

With Scroll

Use <PopoverBody /> to make the content area scrollable while keeping header and footer fixed.

Inside dialog

Render a popover inside a dialog.

Custom spacing

Use [--space:--spacing("value")] on <PopoverContent /> to adjust internal padding (default --spacing(4)).

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`

PopoverTrigger

Opens the popover on click. Use asChild for custom trigger elements.

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

Holds the popover panel content. Displayed in a portal.

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

Attribute	Default
`--space`	`--spacing(4)`

PopoverHeader

Header container. Accepts title and description props or children.

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

PopoverTitle

Accessible title for the popover panel.

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

PopoverDescription

Accessible description for the popover panel.

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

PopoverBody

Scrollable content area. Uses ScrollArea for overflow.

Prop	Type	Default
`className`	`string`	-

PopoverFooter

Footer area for actions or secondary content.

Prop	Type	Default
`className`	`string`	-

PopoverClose

Closes the popover on click. Use asChild for custom close elements.

Prop	Type	Default
`asChild`	`boolean`	-

PopoverArrow

Optional arrow pointing toward the trigger element.

Prop	Type	Default
`className`	`string`	-

Attribute	Default
`--arrow-background`	`var(--popover)`
`--arrow-size`	`calc(1.5 * var(--spacing))`

For a complete list of props, see the Ark UI documentation.