Profile Card

Component 77

About

A compact, hover-to-expand profile microcard with elastic motion, glowing avatar, and GitHub link support, designed for clean light/dark interfaces.

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

Code

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

Usage.tsx

import ProfileCard from "@/components/ui/profile-card";

export default function DemoOne() {
  return (
    <main className="flex min-h-screen items-center justify-center bg-white text-gray-900 dark:bg-black">
      
      <ProfileCard
        imageSrc="https://cdn.21st.dev/assets/mirror/b6/b6e85a09dd0b2eee875409f7564d78eb9011399ac8f3194a58b39a4eb2fa9d17.png"
        name="Daiwiik Harihar"
        role="Full Stack Developer"
        socials={{
          github: "https://github.com/daiv09",
        }}
      />

    </main>
  );
}