Popover

Buttons 74

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,
	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>
	);
}