Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Skeleton - List with Avatars
Skeleton list items with circular avatar placeholders and two-line text for user lists, contacts, and comment sections
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
User lists need faces—avatars make content personal. This React skeleton list uses shadcn/ui Skeleton with size-10 rounded-full avatars and two text lines (name plus subtitle). Built with flex-shrink-0 to prevent avatar squishing and flex-1 text that fills available space, the pattern shows 4 items with circular profile pictures—perfect for contact lists, comment sections, social feeds, user directories, team member lists, or any interface where user identity with name and metadata defines list structure during loading states.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple List Items
Basic icon and text skeletons
Multi-line List Items
Title with multiple text lines
Card with Avatar
Avatar card with content
Avatar
Real avatar component
List with Icons
Bordered items with icons
Skeleton Form
Form field skeletons
Questions you might have
React Skeleton - Simple List Items
Simple skeleton list items with small square icon placeholders and flex-1 text lines for basic loading states
React Skeleton - List with Icons
Bordered skeleton list items with left category icon, two-line text content, and right action icon for settings and navigation