Popover

Buttons 92

About

A beautifully wrapped Radix Popover with custom slots, animations, and sections like header, body, and footer — all styled for seamless integration. Easily build interactive popups with consistent UI and flexible layout support.

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 React from 'react';
import {
    Popover,
    PopoverBody,
    PopoverContent,
    PopoverTrigger,
} from '@/components/ui/popover';
import { Button } from '@/components/ui/button';
import { Share2, Heart, Bookmark, Trash2, MoreHorizontal } from 'lucide-react';
import { Separator } from '@/components/ui/separator';


export default function QuickActionsDemo() {
    const actions = [
        { name: 'Add to Favorites', icon: Heart, color: 'text-red-600' },
        { name: 'Bookmark', icon: Bookmark, color: 'text-blue-600' },
        { name: 'Share', icon: Share2, color: 'text-green-600' },
        { name: 'Delete', icon: Trash2, color: 'text-red-600' },
    ];

    return (
        <Popover>
        <PopoverTrigger asChild >
        <Button variant= "outline" size = "sm" >
            <MoreHorizontal className="mr-2 h-4 w-4" />
                Quick Actions
                    < /Button>
                    < /PopoverTrigger>
                    < PopoverContent className = "w-48" >
                        <PopoverBody className="p-1" >
                            {
                                actions.map((action, index) => (
                                    <React.Fragment key= { action.name } >
                                    <Button
								variant="ghost"
								className = "h-8 w-full justify-start px-2"
								size = "sm"
                                    >
                                    <action.icon className={`mr-2 h-4 w-4 ${action.color}`} />
                            <span className="text-sm" > { action.name } < /span>
                                < /Button>
    { index === 2 && <Separator className="my-1" />}
    </React.Fragment>
					))
}
</PopoverBody>
    < /PopoverContent>
    < /Popover>
	);
}