Popover

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

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

Anatomy

A Dialog wraps the trigger Button and the Popover; the popover holds a DialogContent with its title and body.

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

Placement

Set placement to position the popover relative to its trigger. Values are a side with an optional alignment, e.g. bottom start or bottom end.

<Popover placement="bottom start" />

Arrow

Set showArrow to render an arrow pointing at the trigger (default false).

<Popover showArrow />

Open state

Control visibility with isOpen and onOpenChange on the Dialog trigger (or defaultOpen for uncontrolled).

<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
  <Button />
  <Popover>
    <DialogContent>...</DialogContent>
  </Popover>
</Dialog>

Examples

Basic

In Dialog

With Form

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 7/9/2026