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;