Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/sshahaider/popover'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>
);
}