Components
Loading preview...
Animated Profile Card
npx shadcn@latest add https://21st.dev/r/aghasisahakyan1/animated-profile-cardimport { IdentityCardBody, RevealCardContainer } from "@/components/ui/animated-profile-card";
const GithubIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
<path d="M15 22v-4a4.7 4.7 0 0 0-1-3.4c3 0 6-2 6-5.6a6 6 0 0 0-1-3.6c.3-1.2.3-2.4 0-3.6 0 0-1 0-3 1.4-2.7-.5-5.4-.5-8.1 0C6 2 5 2 5 2c-.3 1.2-.3 2.4 0 3.6A5.5 5.5 0 0 0 4 9c0 3.6 3 5.6 6 5.6-.4.5-.7 1.1-.9 1.7v3.7M9 18c-4.5 2-5-2-7-2" />
</svg>
);
const TwitterIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg viewBox="0 0 512 512" fill="currentColor" {...props}>
<path d="M389 48h71L306 224l181 240H345L234 319 107 464H36L201 276 27 48h146l100 133L389 48zM364 422h39L151 88h-42l255 334z" />
</svg>
);
const profile = {
avatarUrl: "https://avatars.githubusercontent.com/u/199367026?s=280&v=4",
avatarText: "JD",
fullName: "John Doe",
place: "San Francisco, USA",
about: "Software Engineer at 21st, building clean UI systems and experimenting with new dev tools.",
socials: [
{
id: "gh",
url: "https://github.com/21st-dev",
label: "GitHub",
icon: <GithubIcon className="h-5 w-5" />,
},
{
id: "tw",
url: "https://x.com/21st_dev",
label: "Twitter",
icon: <TwitterIcon className="h-4 w-4" />,
},
],
};
export default function ProfileCardDemo() {
return (
<div className="flex min-h-[500px] w-full items-center justify-center bg-background p-6">
<RevealCardContainer
accent="#e0f2fe"
textOnAccent="#0f172a"
mutedOnAccent="#475569"
base={
<IdentityCardBody {...profile} scheme="plain" displayAvatar={false} />
}
overlay={
<IdentityCardBody
{...profile}
scheme="accented"
displayAvatar={true}
cardCss={{ backgroundColor: "var(--accent-color)" }}
/>
}
/>
</div>
);
}