Components
Loading preview...
Displays rich content in a portal, triggered by a button.
npx shadcn@latest add https://21st.dev/r/shadcn/popoverimport { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Send } from "lucide-react";
function User() {
return (
<Popover>
<PopoverTrigger className="flex items-center gap-2">
<Avatar>
<AvatarFallback>PJ</AvatarFallback>
</Avatar>
<span className="font-medium">Praveen Juge</span>
</PopoverTrigger>
<PopoverContent className="grid w-80 gap-4 p-4 text-sm">
<div className="flex items-center gap-3">
<Avatar className="size-8">
<AvatarFallback>PJ</AvatarFallback>
</Avatar>
<div>
<div className="font-medium">Praveen Juge</div>
<div className="text-muted-foreground">hi@praveenjuge.com</div>
</div>
</div>
<div className="text-muted-foreground">
Praveen is designer that specialize in UI design, accessibility, CSS
and design systems with a knack for pixel-perfect outcomes.
</div>
<div className="flex gap-2">
<Button variant="outline" className="flex-1">
View Profile
</Button>
<Button className="flex-1">
<Send className="mr-2 size-4" />
Message
</Button>
</div>
</PopoverContent>
</Popover>
);
}
export { User }