Popover

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/popover.json

Usage

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

<Popover>
  <PopoverTrigger render={<Button variant="outline">Filters</Button>} />
  <PopoverContent side="bottom" align="start">
    <PopoverTitle>Filters</PopoverTitle>
    {/* any interactive content */}
  </PopoverContent>
</Popover>

Props

PopoverContent: side (default bottom), align (default center), sideOffset (default 8). Root accepts open / onOpenChange for controlled use; PopoverClose closes from inside.

Accessibility

• Focus moves into the popover on open and returns to the trigger on close; Escape and outside-click dismiss.
• Use PopoverTitle/PopoverDescription: they're wired to the popup with aria-labelledby/aria-describedby.
• For hover-only content use a Tooltip; popovers are for interactive content.