Social Hover Card

Cards 2

About

A profile hover/focus card that expands an avatar or @handle trigger into a rich preview showing bio, verified badge, follower stats and a follow button.

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

Code

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

Usage.tsx

"use client";

import SocialHoverCard from "@/components/ui/social-hover-card";

export default function SocialHoverCardDemo() {
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center bg-background p-10">
      <p className="max-w-md text-center text-base text-foreground leading-relaxed">
        Follow{" "}
        <SocialHoverCard
          profile={{
            id: "1",
            name: "Ada Lovelace",
            handle: "ada",
            avatar: "https://cdn.21st.dev/assets/mirror/a3/a37358a09c532474e3246a94e5e5104b1b6b6907f83b44259509f8c776506120.jpg",
            banner:
              "https://cdn.21st.dev/assets/mirror/54/5478cddb11d1c2e5944b4be273331310dccc5cf4784bf79663f0046b28762156.jpg",
            bio: "Mathematician and writer, known for her work on Charles Babbage's Analytical Engine.",
            verified: true,
            url: "https://en.wikipedia.org/wiki/Ada_Lovelace",
            stats: [
              { label: "Following", value: 128 },
              { label: "Followers", value: 5321 },
            ],
          }}
        />{" "}
        for updates on the history of computing.
      </p>
    </div>
  );
}