Loading...
Loading...
> Displays rich content in a portal, triggered by a button or other element.
1import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
1<Popover>2 <PopoverTrigger asChild>3 <Button variant="outline">> OPEN POPOVER</Button>4 </PopoverTrigger>5 <PopoverContent>6 <div className="space-y-2">7 <h4 className="font-semibold">Dimensions</h4>8 <p className="text-sm text-muted-foreground">9 Set the dimensions for the layer.10 </p>11 </div>12 </PopoverContent>13</Popover>
1<Popover>2 <PopoverTrigger asChild>3 <Button>4 <Settings className="mr-2 h-4 w-4" />5 > SETTINGS6 </Button>7 </PopoverTrigger>8 <PopoverContent>9 <div className="grid gap-4">10 <h4 className="font-semibold">Settings</h4>11 <div className="grid gap-2">12 <Label htmlFor="width">{formatLabel("Width")}</Label>13 <Input id="width" defaultValue="100%" />14 <Label htmlFor="height">{formatLabel("Height")}</Label>15 <Input id="height" defaultValue="25px" />16 </div>17 </div>18 </PopoverContent>19</Popover>
1<Popover>2 <PopoverTrigger asChild>3 <Button variant="outline">> ALIGN START</Button>4 </PopoverTrigger>5 <PopoverContent align="start">6 <div className="space-y-2">7 <h4 className="font-semibold">Aligned to Start</h4>8 <p className="text-sm">Content here</p>9 </div>10 </PopoverContent>11</Popover>
1<Popover>2 <PopoverTrigger asChild>3 <Button variant="secondary">> ALIGN END</Button>4 </PopoverTrigger>5 <PopoverContent align="end">6 <div className="space-y-2">7 <h4 className="font-semibold">Aligned to End</h4>8 <p className="text-sm">Content here</p>9 </div>10 </PopoverContent>11</Popover>
1<Popover>2 <PopoverTrigger asChild>3 <Button variant="ghost" size="icon" aria-label="Show more information">4 <Info className="h-4 w-4" />5 </Button>6 </PopoverTrigger>7 <PopoverContent>8 <div className="space-y-2">9 <h4 className="font-semibold">Information</h4>10 <p className="text-sm">Additional info here</p>11 </div>12 </PopoverContent>13</Popover>
1<Popover>2 <PopoverTrigger asChild>3 <Button variant="outline">> WIDE POPOVER</Button>4 </PopoverTrigger>5 <PopoverContent className="w-96">6 <div className="space-y-2">7 <h4 className="font-semibold">Custom Width</h4>8 <p className="text-sm">Content with custom width</p>9 </div>10 </PopoverContent>11</Popover>
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Control the open state of the popover. |
| onOpenChange | (open: boolean) => void | undefined | Event handler called when the open state changes. |
| defaultOpen | boolean | false | The initial open state in uncontrolled mode. |
| modal | boolean | false | Whether the popover is modal (blocks interaction with page). |
| align | "start" | "center" | "end" | "center" | The preferred alignment of the popover with the trigger. |
| sideOffset | number | 8 | The distance in pixels from the trigger. |
✓ Use Popover when:
✗ Don't use when:
Popover vs Tooltip vs Dialog: