Card

Buttons 44

About

Profile Card A visually polished card for displaying a user's profile, including an avatar, name, title, key statistics, and call-to-action buttons. It is designed to be highly reusable by accepting all content via props.

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

Code

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

Usage.tsx

import { ProfileCard, ProfileCardProps } from "@/components/ui/card-3"; // Adjust path if needed

const ProfileCardDemo = () => {
  // Sample data for the component, easily fetched from an API
  const userProfile: ProfileCardProps = {
    imageUrl: "https://cdn.21st.dev/assets/mirror/2e/2e31da7fffb7c833bfe5d16233dabe5c1a62b6a45a56cc49e42bf01e2a679257.jpg",
    fallbackText: "SR",
    name: "Sam Rivers",
    title: "Photographer",
    stats: [
      { label: "Countries Visited", value: 28 },
      { label: "Exhibitions Held", value: 10 },
      { label: "Rating", value: 4.9 },
    ],
    primaryActionLabel: "Explore Portfolio",
    secondaryActionLabel: "Message",
    onPrimaryAction: () => alert("Exploring Portfolio!"),
    onSecondaryAction: () => alert("Sending a message!"),
  };

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-4">
      <ProfileCard {...userProfile} />
    </div>
  );
};

export default ProfileCardDemo;