Popover

A popover displays content in a floating container that appears above other content.

On this page

Props

placement

<Dialog>
  <Button>Open Popover</Button>
  <Popover>
    <DialogContent className="w-56">
      <DialogTitle>Popover Title</DialogTitle>
      <p className="text-sm text-fg-muted">This is a popover with some content. You can put any content here.</p>
    </DialogContent>
  </Popover>
</Dialog>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/popover

Usage

Use popovers to display rich content in a floating container that appears above other content.

import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
import { Popover } from '@/components/ui/popover'

<Dialog>
  <Button>Open Popover</Button>
  <Popover>
    <DialogContent>
      <DialogTitle>Popover Title</DialogTitle>
      <p>Popover content</p>
    </DialogContent>
  </Popover>
</Dialog>

Examples

API Reference

A popover is an overlay element positioned relative to a trigger.

Prop	Type	Default
	`boolean`	`false`
	`Element`	`document.body`
	`number`	`0`
	`RefObject<Element \| null>`	`—`
	`Element`	`document.body`
	`ReactNode \| function`	`—`
	`((target: Element) => DOMRect \| null \| undefined)`	`target.getBoundingClientRect()`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`false`
	`boolean`	`—`
	`number`	`—`
	`Placement`	`'bottom'`
	`RefObject<Element \| null>`	`overlayRef`
	`function`	`—`
	`boolean`	`true`
	`string`	`—`
	`RefObject<Element \| null>`	`—`

Last updated on 6/16/2026