Components
A popover is an overlay element positioned relative to a trigger.
There is no built in way to create popovers in HTML. Popover helps achieve accessible popovers that can be styled as needed.
npx shadcn@latest add https://21st.dev/r/jolbol1/popoverLoading preview...
import { Button } from "@/components/ui/button"
import {
Popover,
PopoverDialog,
PopoverTrigger,
} from "@/components/ui/popover"
export function PopoverDemo() {
return (
<PopoverTrigger>
<Button variant="outline">Settings</Button>
<Popover>
<PopoverDialog>
<div className="flex flex-col gap-4">
<div>Wi-Fi</div>
<div>Bluetooth</div>
<div>Mute</div>
</div>
</PopoverDialog>
</Popover>
</PopoverTrigger>
)
}