shadcn.io is not affiliated with official shadcn/ui
Skeleton examples · Profile
Profile Card Skeleton for React
A profile card placeholder with an avatar, a name, a short bio and three stats.
A loading profile card: an avatar beside two lines for the name, two lines of bio, and three stats in a row under a top border. Every block is a Skeleton.
Use it for user cards, directories or profiles that show counts such as followers or posts.
Preview
Installation
FAQ
What wraps the profile card?
flex w-full max-w-sm flex-col gap-4 rounded-md border p-6. Header, two bio lines, then a stats row.
How is the header built?
flex items-center gap-4 holds a size-16 shrink-0 rounded-full circle and a flex-1 column. The name is h-5 w-32. The line under it is h-4 w-24.
What are the two lines under the header?
h-4 w-full and h-4 w-5/6. The shorter line reads as the end of a short bio.
How are the three stats laid out?
flex gap-4 border-t pt-2. Each stat is flex flex-1 flex-col items-center gap-2, with h-6 w-12 over h-3 w-16.
Related
- User Profile Header SkeletonA centered profile header placeholder
- Profile Settings Form SkeletonA profile settings placeholder with three
- Card with Avatar and Content SkeletonA bordered card placeholder with a round
- List with Avatars SkeletonFour list rows, each with a round avatar
- Badge with Text (Standard)A default badge with a short label for a
- Avatar StandardA round avatar with a profile picture and