Popover

Floating, anchored panel that displays additional content when triggered.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/popover.json

Usage

Pass `trigger` plus optional `title`/`description` for the simple case; or compose `PopoverTrigger` + `PopoverContent` children manually.

TSImport

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

TSExample

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

export function Example() {
  return (
    <Popover
      trigger={<Button variant="outline">Open</Button>}
      title="Heads up"
      description="Anchored to the trigger; closes on outside click or Esc."
    />
  );
}

Composition

Anatomy of the Popover primitive.

Popover                          (opt-in flat API — pass trigger + title to skip slots)
├── trigger={<Button … />}
├── title={<ReactNode>}
├── description={<ReactNode>}
├── side / align / sideOffset / alignOffset (Base UI positioning)
├── contentClassName="w-72 p-4"
└── children                      (rendered after the title block — forms, lists, custom JSX)

Without trigger/title/description, Popover stays compound — drop in
PopoverTrigger + PopoverContent children manually, just like before. The
slot exports — PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle,
PopoverDescription — remain available for any layout the prop API can't
express (date pickers, color pickers, command palettes, etc).

Basic

Plain popover with a title + description.

Morph open

`MorphingPopover` shares a layoutId between the trigger and the content, so the button morphs straight into the panel (and back) with a springy ease. Pin the panel to a trigger corner to set the grow direction.

Dimensions form

Inline controls inside a popover.

User search

Debounced live search with avatars and counts.

Confirm destructive action

Icon trigger + centered warning + two-button footer.

API Reference

Props exposed by the Popover primitive and its slots.

Popover

Prop	Type	Default	Description
`trigger`	ReactNode	—	Element that opens the popover (e.g. `<Button>`). When provided, switches to the flat layout.
`title`	ReactNode	—	Heading rendered at the top of the content panel.
`description`	ReactNode	—	Subhead beneath the title.
`contentClassName`	string	—	Class names applied to the content panel.
`side`	"top" \| "right" \| "bottom" \| "left"	"bottom"	Side of the trigger to position against.
`align`	"start" \| "center" \| "end"	"center"	Alignment along the chosen side.
`sideOffset`	number	4	Distance in pixels from the trigger.
`alignOffset`	number	0	Offset along the alignment axis.
`className`	string	—	Override the popup container classes.