Components
Loading preview...
Profile Card A visually polished card component to display user profile information, including statistics and action buttons. It features a subtle entrance animation and adapts seamlessly to light and dark themes.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-5import { ProfileCard } from "@/components/ui/card-5";
export default function ProfileCardDemo() {
const userStats = [
{ label: "Countries Visited", value: 28 },
{ label: "Exhibitions Held", value: 10 },
{ label: "Today Rating", value: 4.9 },
];
const userActions = [
{
label: "Explore Portfolio",
variant: "default" as const, // Specify variant for styling
onClick: () => alert("Exploring portfolio..."),
},
{
label: "Message",
variant: "secondary" as const,
onClick: () => alert("Opening message..."),
},
];
return (
<div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
<ProfileCard
avatarSrc="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D"
name="Sam Rivers"
handle="Photographer"
bio="Based in Sydney, I capture breathtaking landscapes and cultural moments across the globe."
stats={userStats}
actions={userActions}
/>
</div>
);
}