About
An anchored, non-modal panel for a small form or filter that opens next to its trigger button and dismisses on Escape or an outside click.
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 } from "@/components/ui/popover";
export default function PopoverDemo() {
return (
<div className="flex min-h-[360px] w-full items-center justify-center bg-background p-10 text-foreground">
<Popover placement="bottom-start">
<Popover.Trigger asChild>
<button
type="button"
className="inline-flex h-10 items-center rounded-md border border-border bg-secondary px-4 text-sm font-medium text-foreground"
>
Filters
</button>
</Popover.Trigger>
<Popover.Content title="Filter results">
<div className="flex flex-col gap-2">
<label className="flex items-center gap-2 text-sm">
<input type="checkbox" defaultChecked /> Only mine
</label>
<label className="flex items-center gap-2 text-sm">
<input type="checkbox" /> Include archived
</label>
</div>
<div className="mt-3 flex justify-end">
<Popover.Close asChild>
<button
type="button"
className="inline-flex h-8 items-center rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground"
>
Apply
</button>
</Popover.Close>
</div>
</Popover.Content>
</Popover>
</div>
);
}
More in Forms
View all
Premium Auth
525
Contact Card
1K
Login 2
8
Card Studio
41
Form
16
Book A Demo 1
74
HeroUI Field Error
10
Book A Demo 3
90