About
A floating panel that appears on demand. Built on top of Base UI Popover component with shadcn styling.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Base Popover to your project and fits it to your theme.
Code
How Base Popover is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/base-popover';
import { Button } from '@/components/ui/base-button';
import { MoveDown, MoveLeft, MoveRight, MoveUp } from 'lucide-react';
export default function BasePopoverDemo() {
return (
<div className="flex items-center justify-center gap-6">
<Popover>
<PopoverTrigger render={<Button variant="outline" />}>
<MoveLeft />
Left
</PopoverTrigger>
<PopoverContent className="max-w-[250px] text-sm space-y-2" side="left">
<p className="font-medium">Left Position</p>
<p className="text-muted-foreground">This popover appears on the left side of the trigger button.</p>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger render={<Button variant="outline" />}>
<MoveUp />
Top
</PopoverTrigger>
<PopoverContent className="max-w-[250px] text-sm space-y-2" side="top">
<p className="font-medium">Top Position</p>
<p className="text-muted-foreground">This popover appears above the trigger button.</p>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger render={<Button variant="outline" />}>
<MoveRight />
Right
</PopoverTrigger>
<PopoverContent className="max-w-[250px] text-sm space-y-2" side="right">
<p className="font-medium">Right Position</p>
<p className="text-muted-foreground">This popover appears on the right side of the trigger button.</p>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger render={<Button variant="outline" />}>
<MoveDown />
Bottom
</PopoverTrigger>
<PopoverContent className="max-w-[250px] text-sm space-y-2" side="bottom">
<p className="font-medium">Bottom Position</p>
<p className="text-muted-foreground">This popover appears below the trigger button.</p>
</PopoverContent>
</Popover>
</div>
);
}
Dependencies
More by Sean Hello
View all
3D Testimonails
3.3K
Line Charts 9
637
Alert
492
Area Charts 1
385
Line Charts 6
384
Scroll Area
376
Area Charts 2
317
Navigation Menu
305
More in Buttons
View all
Button Save
46
Button
20
Eclipse Button
5
Button
6
Button
14
Button Group
37
Button
32
Split Button
32
