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.
"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>
);
}
Part of SmoothUI — browse the full library on 21st.dev.