Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Skeleton - User Profile Header
Centered user profile skeleton with large circular avatar, name and subtitle text, and two action buttons for profile headers
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Profile pages need personality—avatars and names establish identity. This React skeleton profile uses shadcn/ui Skeleton with centered items-center layout, size-24 rounded-full avatar (96px), name and subtitle skeletons, plus two action buttons. Built with flex-col gap-4 stacking and bordered container, the pattern shows complete profile header structure—perfect for user profile pages, account settings headers, social media profiles, team member showcases, contact cards, or any interface where centered profile identity with name and action buttons defines header structure during loading states.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Profile with Bio
Profile with bio text lines
Profile with Stats
Profile with stat counters
Card with Avatar
Left-aligned avatar card
Avatar
Real avatar component
List with Avatars
Avatar list items
Button
Real button component
Questions you might have
React Skeleton - Hierarchical List Items
Hierarchical skeleton list with indented child items using pl-6 padding for nested navigation and file tree structures
React Skeleton - Profile Card
Profile card skeleton with left-aligned avatar, bio text lines, and three stat counters for social profiles and user cards