Popover

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

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`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`false`
	`boolean`	`—`
	`number`	`—`
	`Placement`	`'bottom'`
	`DOMRenderFunction<"div", PopoverRenderProps>`	`—`
	`RefObject<Element \| null>`	`overlayRef`
	`((element: Element) => boolean)`	`—`
	`boolean`	`true`
	`string`	`—`
	`RefObject<Element \| null>`	`—`

Last updated on 6/4/2026