GitHub

Go to...

Choose a page to open.

A floating panel that opens next to its trigger.

Popover

popover-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/popover.json

Usage

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>Open</PopoverTrigger>
  <PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>

PopoverContent takes side, sideOffset, align, and alignOffset to set its position.