Components
Loading preview...
A popover is an overlay element positioned relative to a trigger.
@jollyshopland
npx shadcn@latest add https://21st.dev/r/jollyshopland/popover-1import { Button } from "@/components/ui/button-1"
import {
Popover,
PopoverDialog,
PopoverTrigger,
} from "@/components/ui/popover-1"
import { Switch } from "@/components/ui/switch-1"
export default function PopoverDemo() {
return (
<PopoverTrigger>
<Button variant="outline">Settings</Button>
<Popover>
<PopoverDialog>
<div className="flex flex-col gap-4">
<Switch defaultSelected>
<div className="indicator" /> Wi-Fi
</Switch>
<Switch defaultSelected>
<div className="indicator" /> Bluetooth
</Switch>
<Switch>
<div className="indicator" /> Mute
</Switch>
</div>
</PopoverDialog>
</Popover>
</PopoverTrigger>
)
}