Popover

Displays rich content in a portal, triggered by a button.

Demo

Import the parts you need from the component's folder.

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

A simple popover with a header, title, and description.

Use the align prop on PopoverContent to control the horizontal alignment.

A popover with form fields inside.

Prop	Type	Default	Description
`open`	`boolean`	—	Open state. Supports v-model:open.
`defaultOpen`	`boolean`	`false`	Open state when initially rendered. Use when the popover is uncontrolled.
`modal`	`boolean`	`false`	Trap focus and dim background.

Event	Description
`update:open`	Fires when the popover opens or closes. Enables v-model:open.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto the child element instead of a button.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto the child element. Positions the content against this element instead of the trigger.

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Anchor side.
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment along the side.
`sideOffset`	`number`	`4`	Gap from the trigger.

Prop	Type	Default	Description
`class`	`string`	—	Extra classes, merged with cn(). Wraps the title and description.

Prop	Type	Default	Description
`class`	`string`	—	Extra classes, merged with cn(). Renders an h4.

Prop	Type	Default	Description
`class`	`string`	—	Extra classes, merged with cn(). Renders a muted paragraph.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Space`	When focus is on the trigger, toggles the popover open or closed.
`Enter`	When focus is on the trigger, toggles the popover open or closed.
`Tab`	Moves through focusable elements inside the content, then out of the popover.
`Shift` + `Tab`	Moves focus to the previous focusable element.
`Esc`	Closes the popover and returns focus to the trigger.