Popover
A floating panel for displaying rich content triggered by a button or element
A floating overlay panel that displays rich content when triggered. Built on Radix UI Popover for accessible, keyboard-navigable interactions.
npx shadcn@latest add https://nteract-elements.vercel.app/r/popover.json
import {
Popover,
PopoverTrigger,
PopoverContent,
} from "@/registry/primitives/popover"
export function Example() {
return (
<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent>Content goes here.</PopoverContent>
</Popover>
)
}
<Popover>
<PopoverTrigger asChild>
<Button variant="outline">Click me</Button>
</PopoverTrigger>
<PopoverContent>
<p className="text-sm">Simple popover content.</p>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger asChild>
<Button>Settings</Button>
</PopoverTrigger>
<PopoverContent className="w-80">
<PopoverHeader>
<PopoverTitle>Settings</PopoverTitle>
<PopoverDescription>Configure your preferences here.</PopoverDescription>
</PopoverHeader>
<div className="grid gap-2 pt-4">
<div className="flex items-center justify-between">
<span className="text-sm">Notifications</span>
<Button variant="outline" size="sm">Toggle</Button>
</div>
</div>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger asChild>
<Button variant="secondary" size="sm">Cell Info</Button>
</PopoverTrigger>
<PopoverContent className="w-64">
<PopoverHeader>
<PopoverTitle>Cell Metadata</PopoverTitle>
<PopoverDescription>Execution details</PopoverDescription>
</PopoverHeader>
<div className="grid gap-1 pt-2 text-sm">
<div className="flex justify-between">
<span className="text-muted-foreground">Duration:</span>
<span>0.42s</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Kernel:</span>
<span>Python 3.11</span>
</div>
</div>
</PopoverContent>
</Popover>
| Prop | Type | Default | Description |
|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | false | Default open state |
onOpenChange | (open: boolean) => void | — | Callback when open state changes |
modal | boolean | false | Whether to render as modal |
| Prop | Type | Default | Description |
|---|
asChild | boolean | false | Render as child element using Radix Slot |
...props | ButtonHTMLAttributes | — | All standard button attributes |
| Prop | Type | Default | Description |
|---|
align | "start" | "center" | "end" | "center" | Alignment relative to trigger |
sideOffset | number | 4 | Distance from trigger in pixels |
className | string | — | Additional CSS classes |
...props | PopoverPrimitive.ContentProps | — | All Radix Popover Content props |
| Prop | Type | Default | Description |
|---|
className | string | — | Additional CSS classes |
...props | HTMLAttributes<HTMLDivElement> | — | All standard div attributes |
| Prop | Type | Default | Description |
|---|
className | string | — | Additional CSS classes |
...props | HTMLAttributes<HTMLHeadingElement> | — | All standard h2 attributes |
| Prop | Type | Default | Description |
|---|
className | string | — | Additional CSS classes |
...props | HTMLAttributes<HTMLParagraphElement> | — | All standard p attributes |