<Dialog>
<Button aria-label="Help">
<InfoIcon />
</Button>
<Popover>
<DialogContent className="w-56 space-y-4">
<DialogHeading>Need help?</DialogHeading>
<p>If you're having issues accessing your account, contact our customer support team for help.</p>
</DialogContent>
</Popover>
</Dialog>npx shadcn@latest add @dotui/popoverUse popovers to display rich content in a floating container that appears above other content.
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeading } from "@/components/ui/dialog";
import { Popover } from "@/components/ui/popover";<Dialog>
<Button>Open Popover</Button>
<Popover>
<DialogContent>
<DialogHeading>Popover Title</DialogHeading>
<p>Popover content</p>
</DialogContent>
</Popover>
</Dialog>Use the controls below to experiment with different popover props and see the live preview and code update.
The placement of the element with respect to its anchor element.
Placement<Dialog>
<Button>Open Popover</Button>
<Popover placement="bottom">
<DialogContent className="w-56">
<DialogHeading>Popover Title</DialogHeading>
<p className="text-fg-muted text-sm">
This is a popover with some content. You can put any content here.
</p>
</DialogContent>
</Popover>
</Dialog>A popover is an overlay element positioned relative to a trigger.
| Prop | Type | Default | |
|---|---|---|---|
boolean | false | ||
string | — | ||
RefObject<Element | null> | — | ||
boolean | — | ||
boolean | — | ||
Element | document.body | ||
Placement | 'bottom' | ||
Element | document.body | ||
RefObject<Element | null> | — | ||
RefObject<Element | null> | overlayRef | ||
boolean | true | ||
number | — | ||
number | 0 | ||
boolean | — | ||
boolean | false | ||
((element: Element) => boolean) | — | ||
ReactNode | function | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.