Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-3import { 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://images.unsplash.com/photo-1603415526960-f7e0328c63b1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?q=80&w=256&h=256&auto=format&fit=crop",
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;