About
A compound avatar-and-details card that pairs a person's photo with their name, handle, bio or timestamp, useful for author bylines, comments and blog post credits.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Profile Card to your project and fits it to your theme.
Code
How Profile Card is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import {
ProfileCard,
ProfileCardAvatar,
ProfileCardBody,
ProfileCardDetails,
ProfileCardName,
ProfileCardVerifiedBadge,
} from "@/components/ui/profile-card";
export default function ProfileCardDemo() {
return (
<div className="flex w-full max-w-xs flex-col gap-6 p-8">
<ProfileCard>
<ProfileCardAvatar
src="https://cdn.21st.dev/assets/localized/513d06f542692036ff0bb17938f04b3efd60567ba2cae08049469d21f18e0524.jpg"
name="shadcn"
/>
<ProfileCardDetails>
<ProfileCardName>
shadcn
<ProfileCardVerifiedBadge />
</ProfileCardName>
<ProfileCardBody>@shadcn</ProfileCardBody>
</ProfileCardDetails>
</ProfileCard>
<ProfileCard variant="horizontal">
<ProfileCardAvatar
src="https://cdn.21st.dev/assets/localized/513d06f542692036ff0bb17938f04b3efd60567ba2cae08049469d21f18e0524.jpg"
name="shadcn"
/>
<ProfileCardDetails name="shadcn" body="shadcn@example.com" />
</ProfileCard>
<ProfileCard variant="vertical">
<ProfileCardAvatar
src="https://cdn.21st.dev/assets/localized/513d06f542692036ff0bb17938f04b3efd60567ba2cae08049469d21f18e0524.jpg"
name="shadcn"
className="size-16"
/>
<ProfileCardDetails name="shadcn" body="Creator, shadcn/ui" />
</ProfileCard>
</div>
);
}
More by shadcncraft
View all
Star Rating
14
Tagline
7