About
A popover is an overlay element positioned relative to a trigger.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Popover to your project and fits it to your theme.
Code
How Popover is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { 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>
)
}