<div className="flex flex-wrap items-center justify-center gap-3">
{(["top", "right", "bottom", "left"] as const).map((side) => (
  <Popover key={side}>
    <PopoverTrigger asChild>
      <Button variant="outline" className="capitalize">{side}</Button>
    </PopoverTrigger>
    <PopoverContent side={side} className="w-48 text-sm">
      Opens to the {side}.
    </PopoverContent>
  </Popover>
))}
</div>

Popover

tsx

import { Button } from "@/components/ui/button";import {Popover,PopoverContent,PopoverDescription,PopoverHeader,PopoverTitle,PopoverTrigger,} from "@/components/ui/popover";const FIELDS = [{ label: "Width", value: "100%" },{ label: "Max. width", value: "300px" },{ label: "Height", value: "25px" },];export function PopoverDemo() {return (  <Popover>    <PopoverTrigger asChild>      <Button variant="outline">Open popover</Button>    </PopoverTrigger>    <PopoverContent className="w-80">      <div className="grid gap-4">        <PopoverHeader>          <PopoverTitle>Dimensions</PopoverTitle>          <PopoverDescription>            Set the dimensions for the layer.          </PopoverDescription>        </PopoverHeader>        <div className="grid gap-2">          {FIELDS.map((field) => (            <label              key={field.label}              className="grid grid-cols-3 items-center gap-4 text-sm"            >              {field.label}              <input                className="col-span-2 h-8 rounded-md border border-input bg-transparent px-2"                defaultValue={field.value}              />            </label>          ))}        </div>      </div>    </PopoverContent>  </Popover>);}

Documentation

Learn Playground

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/popover.json"

Usage

tsx

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

tsx

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>

API

Built on Radix Popover Root; accepts all its props.

Prop	Type	Default	Description
`open`	`boolean`	none	Controlled open state.
`defaultOpen`	`boolean`	none	Open state on first render, when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	none	Called when the popover opens or closes.
`modal`	`boolean`	`false`	When `true`, outside elements can't be interacted with and focus is trapped inside.

PopoverTrigger

Built on Radix Popover Trigger; accepts all its props.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the child element instead, merging props via Radix Slot.

PopoverAnchor

Built on Radix Popover Anchor; accepts all its props. Positions the content against this element instead of the trigger.

PopoverContent

Built on Radix Popover Content, rendered in a portal; accepts all its props.

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Preferred side of the trigger. Flips when it would collide.
`sideOffset`	`number`	`4`	Distance from the trigger in px.
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment against the trigger.
`alignOffset`	`number`	`0`	Offset from the `align` position in px.
`avoidCollisions`	`boolean`	`true`	Flip and shift to stay inside the collision boundary.
`collisionPadding`	`number \| Partial<Record<Side, number>>`	`0`	Distance from the boundary edges where collisions are detected.
`onOpenAutoFocus`	`(event: Event) => void`	none	Called when focus moves into the content on open. Prevent it to keep focus on the trigger.
`onCloseAutoFocus`	`(event: Event) => void`	none	Called when focus returns to the trigger on close.
`forceMount`	`true`	none	Keep the content mounted while closed.

PopoverHeader, PopoverTitle, PopoverDescription

PopoverHeader and PopoverTitle render a native <div>, PopoverDescription a <p>; each accepts all of its props. The header stacks the title and description.

Props match shadcn/ui Popover.