Popover

Displays rich content in a portal, triggered by a control. Prefer align="start" so the panel follows writing direction.

Basic

Open rich content from a button trigger.

Installation

CLI

npx @sonojs/ui@latest add popover

Composition

structure

Popover
├── PopoverTrigger
└── PopoverContent
    ├── PopoverHeader
    │   ├── PopoverTitle
    │   └── PopoverDescription
    └── …

Usage

popover.tsx

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

export function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open</Button>
      </PopoverTrigger>
      <PopoverContent align="start">
        <PopoverHeader>
          <PopoverTitle>Title</PopoverTitle>
          <PopoverDescription>Description text here.</PopoverDescription>
        </PopoverHeader>
      </PopoverContent>
    </Popover>
  )
}

Props

Prop	Type	Default	Description
align	"start" · "center" · "end"	"center"	On `PopoverContent` — horizontal alignment.
side	"top" · "right" · "bottom" · "left"	"bottom"	On `PopoverContent` — preferred side of the trigger.
sideOffset	number	4	Distance in pixels from the trigger.
asChild	boolean	false	On `PopoverTrigger` — merge onto a child control.