Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Skeleton - Profile Card
Profile card skeleton with left-aligned avatar, bio text lines, and three stat counters for social profiles and user cards
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Social profiles need more than names—bio and stats tell the story. This React skeleton profile uses shadcn/ui Skeleton with left-aligned header (size-16 avatar plus name), bio text lines, and border-t stats section with three centered columns. Built with flex-shrink-0 avatar and flex-1 stat columns, the pattern shows complete social profile structure—perfect for social media profiles, team member cards, contact cards with stats, user directories, GitHub-style profiles, or any interface where bio text and stat counters define user identity during loading states.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
User Profile Header
Centered profile with buttons
Profile with Stats
Centered profile with stats
Card with Avatar
Avatar card with content
List with Avatars
Avatar list items
Badge
Real badge component
Avatar
Real avatar component
Questions you might have
React Skeleton - User Profile Header
Centered user profile skeleton with large circular avatar, name and subtitle text, and two action buttons for profile headers
React Skeleton - Profile Settings Form
Profile settings form skeleton with label-input pairs and textarea for edit profile and account settings forms