Components
Loading preview...
Displays rich content in a portal, triggered by a button.
npx shadcn@latest add https://21st.dev/r/shadcn/popoverimport { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
export function Component() {
return (
<Popover>
<PopoverTrigger asChild>
<Button variant="outline">Open Popover</Button>
</PopoverTrigger>
<PopoverContent className="w-80 space-y-2">
<h4 className="font-medium leading-none">Popover Title</h4>
<p className="text-muted-foreground">
This is some basic text inside the popover content.
</p>
</PopoverContent>
</Popover>
);
}