Popover

Component 477

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 { User, Settings } from 'lucide-react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';

export default function UserProfileDemo() {
	return (
		<Popover>
			<PopoverTrigger asChild>
				<Button variant="ghost" className="h-10 w-10 rounded-full p-0">
					<Avatar className="h-8 w-8">
						<AvatarImage src="https://cdn.21st.dev/assets/mirror/50/50d1c7217b14f1cb56dac82b3a68d2f79d9def70661525d1434843c539e1b30a.png" />
						<AvatarFallback>JD</AvatarFallback>
					</Avatar>
				</Button>
			</PopoverTrigger>
			<PopoverContent className='w-62'>
				<PopoverHeader>
					<div className="flex items-center space-x-3">
						<Avatar className="h-10 w-10">
							<AvatarImage src="https://cdn.21st.dev/assets/mirror/50/50d1c7217b14f1cb56dac82b3a68d2f79d9def70661525d1434843c539e1b30a.png" />
							<AvatarFallback>JD</AvatarFallback>
						</Avatar>
						<div>
							<PopoverTitle>John Doe</PopoverTitle>
							<PopoverDescription className='text-xs'>john.doe@example.com</PopoverDescription>
						</div>
					</div>
				</PopoverHeader>
				<PopoverBody className="space-y-1 px-2 py-1">
					<Button variant="ghost" className="w-full justify-start" size="sm">
						<User className="mr-2 h-4 w-4" />
						View Profile
					</Button>
					<Button variant="ghost" className="w-full justify-start" size="sm">
						<Settings className="mr-2 h-4 w-4" />
						Settings
					</Button>
				</PopoverBody>
				<PopoverFooter>
					<Button variant="outline" className="w-full bg-transparent" size="sm">
						Sign Out
					</Button>
				</PopoverFooter>
			</PopoverContent>
		</Popover>
	);
}