Components

Popover

A compact overlay for quick contextual details and lightweight actions without forcing a full dialog.

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Run the registry command below to add popover to your project.

watermelon add popover

Import Popover from your local UI registry output.

Import

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

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

Use a popover when the user needs a little more context, but a full modal would feel heavy.

prop	type	default	description
defaultOpen	boolean	false	Sets the initial open state for uncontrolled popovers.
open	boolean	-	Controls whether the popover is visible.
onOpenChange	(open: boolean) => void	-	Called when the popover toggles.
asChild	boolean	false	Lets the trigger forward interaction into an existing child element.