Popover - Shark UI — ContextQMD

Sections

Components

Utilities

Forms

Hooks

useIsMobile

Copy Markdown

Overlay with extra info or options on trigger.

Docs API

PreviewCode

Open

Installation#

CLIManual

pnpmbunnpmyarn

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>
    </PopoverBody>
    <PopoverFooter>
      <PopoverClose />
    </PopoverFooter>
  </PopoverContent>
</Popover>

Controlled#

Use open and onOpenChange on the root to control the popover state.

PreviewCode

Open controlledOpen uncontrolled

Positioning#

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

PreviewCode

lefttopright

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>

Examples#

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

PreviewCode

Open

Nested#

Nest popovers within one another.

PreviewCode

Open

Anchor#

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

PreviewCode

Open

Close button#

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

PreviewCode

Open

Close behavior#

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

PreviewCode

Open outside clickOpen escape

Scrollable#

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

PreviewCode

Open

Inside dialog#

Render a popover inside a dialog.

PreviewCode

Open

Custom spacing#

Use [--space:--spacing("value")] on PopoverContent to adjust internal padding.

Default spacing is --spacing(4).

PreviewCode

Open

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.

[

Password Input ](/docs/components/password-input)[

Progress ](/docs/components/progress)

On This Page

Installation Anatomy Usage Controlled Positioning Title & Description Using props Using components Examples Non-modal Nested Anchor Close button Close behavior Scrollable Inside dialog Custom spacing API Reference Popover PopoverTrigger PopoverAnchor PopoverContent PopoverHeader PopoverTitle PopoverDescription PopoverBody PopoverFooter PopoverClose PopoverArrow