Overlays

Popover

Rich content anchored to a trigger, opened on click. Not modal, so the page stays usable.

packages/design-system/components/ui/popover.tsx

Examples

With a header and a field. Click to open

Opening to the right, aligned to the start

Anatomy

01Trigger
02Popup, w-72, rounded-3xl
03Header: title and description
04Content

Usage

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

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>Share</PopoverTrigger>
  <PopoverContent align="start">
    <PopoverHeader>
      <PopoverTitle>Share the proposal</PopoverTitle>
      <PopoverDescription>Anyone with the link can view it.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

Props

Prop	Type	Default	Description
open / defaultOpen	boolean	none	Controlled or uncontrolled open state, on the root.
onOpenChange	(open: boolean, details) => void	none	Called when the popup opens or closes.
PopoverTrigger render	ReactElement \| (props, state) => ReactElement	none	Base UI's replacement for asChild: render the part as another element, such as a Button or a Link.
side	"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"	none	Which side of the trigger the popup opens on.
align	"start" \| "center" \| "end"	"center"	How the popup lines up with the trigger along that side.
sideOffset	number	4	The gap between trigger and popup, in pixels.
className	string	none	Merged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Use it for small tools next to what they change.

Don't

Put a whole form in it. Use a dialog.

Where it's used

Builder