Skip to main content
Popover component preview (light)
  • Location: sabo/src/components/ui/popover.tsx

​
When to use

  • Provide small forms, menus, or tips anchored to a button or icon.
  • Use when a full dialog is too heavy and a tooltip is too limited.

​
Usage

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

export function Example() {
  return (
    <Popover>
      <PopoverTrigger className="rounded-md border px-3 py-1.5">Open</PopoverTrigger>
      <PopoverContent className="w-64">
        <div className="text-sm">Small form or menu here.</div>
      </PopoverContent>
    </Popover>
  );
}

​
Key props

​
PopoverContent.align
string
default:"center"
Positioning relative to the trigger: start | center | end.
​
PopoverContent.sideOffset
number
default:"4"
Offset from the trigger in pixels.
​
PopoverAnchor
Position the popover relative to a specific anchor element instead of the trigger.
This component forwards all props from Radix Popover primitives (Root/Trigger/Content). Above are commonly used props. For the full API, see Radix docs: https://www.radix-ui.com/primitives/docs/components/popover

​
Styling tip

Constrain width with w-64 and keep content concise for a lightweight feel. 
<PopoverContent className="w-64 text-sm">...</PopoverContent>

​
Accessibility

  • Use PopoverTrigger with a descriptive button; ensure keyboard navigation works.
  • Content should be dismissible via Esc or click outside.