Popover

A premium, floating content panel triggered by an anchor element, built using Radix UI primitives.

Preview & Interactive Laboratory

Showcase Grid

Usage & Implementation

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

export default function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" className="rounded-none">Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent side="bottom" className="w-80 rounded-none">
        <div className="space-y-2">
          <h4 className="font-semibold text-sm">Title</h4>
          <p className="text-xs text-muted-foreground">Description goes here.</p>
        </div>
      </PopoverContent>
    </Popover>
  )
}
React / Tailwind

Granular Customization

1

Trigger Anchor

The button or element that activates the popover on click.

className={`asChild`}
2

Content Panel

The floating card element containing the popover contents.

className={`className`}
3

Side & Alignment

Configures where the popover positions itself relative to the anchor.

className={`side='top' align='center'`}

API Reference (Props)

PropTypeDefaultDescription
side'top' | 'right' | 'bottom' | 'left''bottom'The preferred side of the anchor to render against.
align'start' | 'center' | 'end''center'The preferred alignment against the anchor.
sideOffsetnumber4The distance in pixels from the anchor element.
alignOffsetnumber0The offset in pixels from the aligned edge.