About
An anchored floating panel that opens from a trigger button, auto-flips and shifts to stay inside the viewport, and dismisses on outside press, Escape, or focus leaving it.
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 items-center justify-center"
style={{
minHeight: 320,
background: "var(--may-color-bg, var(--background))",
}}
>
<Popover
aria-label="Photo details"
trigger={
<button
type="button"
className="may-popover__trigger may-pressable may-hoverable"
>
Options
</button>
}
>
<div style={{ display: "grid", gap: "var(--may-space-2)", width: 260 }}>
<strong
style={{
fontSize: "var(--may-text-headline)",
color: "var(--may-color-text)",
}}
>
IMG_4021.HEIC
</strong>
<span
style={{
color: "var(--may-color-text-secondary)",
fontSize: "var(--may-text-footnote)",
}}
>
Yesterday at 4:31 PM · 3.2 MB · 4032 × 3024
</span>
<button
type="button"
onClick={() => {}}
style={{
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
height: "var(--may-control-h-sm)",
width: "100%",
borderRadius: "var(--may-radius-sm)",
border: 0,
background: "var(--may-color-fill-quaternary)",
color: "var(--may-color-tint)",
fontWeight: 600,
fontSize: "var(--may-text-footnote)",
cursor: "pointer",
}}
>
Show in Finder
</button>
</div>
</Popover>
</div>
);
}
More by adit-firdaus
View all
Steps
1
Adaptive Card
Box
Pagination