Card

Cards 17

About

Profile Card This card component is designed to display user or profile information in a structured and visually appealing way. It accepts props for the image, name, age, description, and a list of tags, making it highly reusable.

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-4"; // Adjust the import path

const ProfileCardDemo = () => {
  // Sample data for the profile card
  const trainerData: ProfileCardProps = {
    name: "Joshua Thompson",
    subtitle: "34 years old",
    imageUrl: "https://cdn.21st.dev/assets/mirror/08/0877cc22e3e98661f1cdf3b28e9303a9092a63500631fcd7df8e71fa835ba711.jpg",
    description:
      "Joshua is a personal trainer specializing in weight loss and body transformation. He creates personalized workout plans to help clients achieve their fitness goals effectively and safely.",
    tags: [
      { text: "Weight Loss Workouts" },
      { text: "5 times/week", variant: "highlight" },
    ],
  };

  return (
    <div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
      <ProfileCard {...trainerData} />
    </div>
  );
};

export default ProfileCardDemo;