About
A floating panel anchored to a trigger element, used for small contextual content like settings, filters, or a short form.
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
"use client";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import * as React from "react";
export default function SharePopoverDemo() {
const [copied, setCopied] = React.useState(false);
return (
<div className="flex h-screen w-full items-center justify-center bg-background">
<Popover>
<PopoverTrigger className="inline-flex h-9 items-center gap-2 rounded-md border border-border bg-background px-4 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-muted">
Share
</PopoverTrigger>
<PopoverContent side="bottom" align="end" className="w-80">
<div className="flex flex-col gap-3">
<h4 className="text-sm font-semibold text-popover-foreground">
Share this page
</h4>
<div className="flex items-center gap-2">
<input
readOnly
value="https://wunderui.com/components/popover"
className="h-8 flex-1 rounded-md border border-border bg-muted px-2 text-xs text-foreground"
/>
<button
onClick={() => {
setCopied(true);
setTimeout(() => setCopied(false), 1500);
}}
className="h-8 shrink-0 rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:opacity-90"
>
{copied ? "Copied" : "Copy"}
</button>
</div>
</div>
</PopoverContent>
</Popover>
</div>
);
}
Dependencies
More by wunder-ui
View all
Empty State