Avatar Hover Card

Cards 209

About

Avatar card that expands on hover to reveal profile information with smooth animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Avatar Hover Card to your project and fits it to your theme.

Code

How Avatar Hover Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Component } from "@/components/ui/avatar-hover-card";
import { Button } from "@/components/ui/button";
import { MessageCircle, UserPlus } from "lucide-react";

export default function DemoOne() {
  return <Component  
  imageSrc="https://cdn.21st.dev/assets/mirror/51/513d06f542692036ff0bb17938f04b3efd60567ba2cae08049469d21f18e0524.jpg"
        imageAlt="Profile"
        name="shadcn"
        username="shadcn"
        description="Community manager and content creator."
        buttonContent={
          <div className="flex gap-2 w-full">
            <Button size="sm" variant="outline" className="flex-1">
              <MessageCircle className="h-4 w-4 mr-2" />
              Message
            </Button>
            <Button size="sm" className="flex-1">
              <UserPlus className="h-4 w-4 mr-2" />
              Follow
            </Button>
          </div>
        }
  
   />;
}