Popover

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add popover

Usage#

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

export function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open</Button>
      </PopoverTrigger>
      <PopoverContent>Content</PopoverContent>
    </Popover>
  )
}

With a form#

The canonical use case. Because the content exposes --surface, nested Inputs paint the panel surface rather than the page. Wrap actions in PopoverClose to dismiss on click.

With arrow & close button#

Set showArrow for a pointer toward the trigger, and use PopoverCloseButton for a styled top-right dismiss.

Alignment#

Control placement along the trigger with align (start · center · end) and side / sideOffset, all forwarded to Radix.

Density#

density tunes the content padding: compact for dense application UI. It also cascades from a surrounding DensityProvider.

Confirm an action#

A lightweight inline confirm for a destructive action. The footer pairs a ghost Cancel with a destructive primary, each wrapped in PopoverClose so either choice dismisses.

Profile card#

A richer surface: compose an Avatar with identity and actions for a hover-card style preview.

Media and footer#

PopoverMedia frames a picture or video 8px in from the panel's edges, first or last, with corners concentric to the panel's (16px outside, 8px on the picture). PopoverFooter closes the panel with a muted well on the same inset, where a divider line would otherwise go; its text lands back on the copy's line. At compact both sit 4px in, with 12px corners.

Share a link#

A read-only Input blends with the panel through --surface, and the copy button swaps to a confirmation for a beat after a click.

Feedback prompt#

A common composition: pair the surface with a ToggleGroup for a "Was this useful?" rating. The control is its own label, so no inputs are needed. Shown here always visible as a card; the same content drops straight into a PopoverContent.

A compact take drops the subtitle and swaps in a thank-you once answered.

And floated in the popover itself, revealed from a trigger.

FAQ#