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,
PopoverDescription,
PopoverHeader,
PopoverTitle,
PopoverTrigger,
PopoverFooter,
} from '@/components/ui/popover';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Share2, Copy, Mail, MessageSquare } from 'lucide-react';
export default function ShareDemo() {
const shareOptions = [
{
name: 'Copy Link',
icon: Copy,
action: () => navigator.clipboard.writeText(window.location.href),
},
{ name: 'Email', icon: Mail, action: () => { } },
{ name: 'Message', icon: MessageSquare, action: () => { } },
];
return (
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" size="sm">
<Share2 className="mr-2 h-4 w-4" />
Share
</Button>
</PopoverTrigger>
<PopoverContent className="w-72">
<PopoverHeader>
<PopoverTitle>Share this item</PopoverTitle>
<PopoverDescription>
Choose how you want to share this
</PopoverDescription>
</PopoverHeader>
<PopoverBody className="space-y-1 px-2 py-1">
{shareOptions.map((option) => (
<Button
key={option.name}
variant="ghost"
className="w-full justify-start"
size="sm"
onClick={option.action}
>
<option.icon className="mr-2 h-4 w-4" />
{option.name}
</Button>
))}
</PopoverBody>
<PopoverFooter className="py-3">
<Label htmlFor="share-url">Share URL</Label>
<div className="flex space-x-2">
<Input
id="share-url"
value="https://example.com/shared-item"
readOnly
className="text-xs"
/>
<Button size="sm" variant="outline">
<Copy className="h-4 w-4" />
</Button>
</div>
</PopoverFooter>
</PopoverContent>
</Popover>
);
}