Components
Loading preview...
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.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/card-4import { 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://images.unsplash.com/photo-1548690312-e3b507d8c110?q=80&w=256&h=256&fit=crop",
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;