Cognition

Components

Popover

Displays rich content in a portal, triggered by a button. Use it for secondary controls — a form, a detail panel, a set of options — that should float above the page and dismiss on outside click or Escape.

Preview

Rendered with live Cognition tokens — the panel surface, border, and text remap on theme change, no dark: classes. Trigger it to float the content over the page.

Variants

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="grid gap-4">
      <div className="space-y-1">
        <h4 className="font-medium leading-none">Dimensions</h4>
        <p className="text-sm text-text-subtle">Set the dimensions for the layer.</p>
      </div>
      <div className="grid grid-cols-3 items-center gap-4">
        <label htmlFor="width">Width</label>
        <Input id="width" placeholder="Placeholder" className="col-span-2 h-8" />
      </div>
      {/* …more fields */}
    </div>
  </PopoverContent>
</Popover>
<PopoverContent>
  <div className="space-y-1">
    <h4 className="font-medium leading-none">Activity log</h4>
    <p className="text-sm text-text-subtle">Rich content lives in a portal…</p>
  </div>
</PopoverContent>

The popover frames whatever you put in it — a compact form like Dimensions, or a short block of detail. Set an explicit width on PopoverContent (it defaults to w-72).

Alignment

<PopoverContent align="start">…</PopoverContent>
<PopoverContent align="center">…</PopoverContent>
<PopoverContent align="end">…</PopoverContent>

align positions the content against the trigger; pair it with side and sideOffset to control placement. Radix flips the side automatically when there isn't room.

API

Prop
Type
Default
Description
Popover open
boolean
undefined
Controlled open state. Pair with onOpenChange; omit for uncontrolled.
Popover defaultOpen
boolean
false
Open on mount when uncontrolled.
PopoverTrigger asChild
boolean
false
Render your own element (e.g. a Button) as the trigger.
PopoverContent align
"start" | "center" | "end"
"center"
Alignment against the trigger along the side axis.
PopoverContent side
"top" | "right" | "bottom" | "left"
"bottom"
Which side of the trigger the content opens on.
PopoverContent sideOffset
number
4
Gap in pixels between the trigger and the content.

Don't and Do

Don't

Don't use a popover for a simple menu of actions — that's Dropdown Menu — or for a flat text hint, which is a Tooltip. And don't put critical, must-act-on content in one; it dismisses on any outside click.

Do
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open</Button>
  </PopoverTrigger>
  <PopoverContent>…</PopoverContent>
</Popover>
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

export function DimensionsPopover() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <h4 className="font-medium leading-none">Dimensions</h4>
        <p className="text-sm text-text-subtle">Set the dimensions for the layer.</p>
      </PopoverContent>
    </Popover>
  );
}
API matches fe-distillery/components/ui/popover.tsx — Popover, PopoverTrigger, PopoverAnchor, PopoverContent. The raw popover surface and foreground are replaced with Cognition tokens, matching the Dropdown Menu and Dialog content.