Sections

Utilities

Forms

Hooks

useIsMobileNew

Popover

Overlay with extra info or options on trigger.

Installation


pnpm dlx shadcn@latest add @shark/popover

Anatomy


Popover
├── PopoverTrigger
└── PopoverContent
    ├── PopoverHeader
    │   ├── PopoverTitle
    │   └── PopoverDescription
    ├── PopoverBody
    ├── PopoverFooter
    └── PopoverClose

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 & Description

PopoverHeader supports two usage patterns:

Using props

Pass title and description props directly to PopoverHeader.


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

This approach does not require PopoverTitle or PopoverDescription components.

Using components

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 is --spacing(4).

You can use breakpoint utilities to change the internal spacing at different screen sizes.


  md:[--space:--spacing(6)] lg:[--space:--spacing(8)]

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.

Pagination

Progress