import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverHeader,
PopoverTitle,
PopoverTrigger,
} from "@/components/ui/popover";
export function PopoverDemo() {
return (
<Popover>
<PopoverTrigger render={<Button variant="outline">Open</Button>} />
<PopoverContent>
<PopoverHeader>
<PopoverTitle>Event Details</PopoverTitle>
<PopoverDescription>
Join us for an exclusive workshop on modern web development. Click
below to register or learn more.
</PopoverDescription>
</PopoverHeader>
</PopoverContent>
</Popover>
);
}Installation
npx shadcn@latest add "https://eo-n.vercel.app/r/popover"Usage
Import all parts and piece them together.
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverTitle,
PopoverTrigger,
} from "@/components/ui/popover";<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent>
<PopoverTitle>Popover Title</PopoverTitle>
<PopoverDescription>
This is some content inside the popover.
</PopoverDescription>
</PopoverContent>
</Popover>Examples
Open On Hover
import { Dot } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverHeader,
PopoverTitle,
PopoverTrigger,
} from "@/components/ui/popover";
export function PopoverHover() {
return (
<Popover openOnHover>
<PopoverTrigger
render={<Button variant="outline">Event Details</Button>}
/>
<PopoverContent className="w-[325px] space-y-3">
<PopoverHeader>
<PopoverTitle>React Summit 2025</PopoverTitle>
<PopoverDescription>
Join us for the biggest React conference of the year featuring
workshops, keynotes, and networking opportunities.
</PopoverDescription>
</PopoverHeader>
<div className="mb-3 space-y-2">
<div className="flex items-start">
<Dot className="mt-0.5 h-4 w-4 flex-shrink-0" />
<p className="ml-2 text-sm">20+ speakers from top tech companies</p>
</div>
<div className="flex items-start">
<Dot className="mt-0.5 h-4 w-4 flex-shrink-0" />
<p className="ml-2 text-sm">Hands-on workshops on React 20</p>
</div>
<div className="flex items-start">
<Dot className="mt-0.5 h-4 w-4 flex-shrink-0" />
<p className="ml-2 text-sm">
Early bird pricing available until Feb 15
</p>
</div>
</div>
<Button className="w-full">View Full Schedule</Button>
</PopoverContent>
</Popover>
);
}