Shadcn.io is not affiliated with official shadcn/ui
List with Avatars
Skeleton list items with circular avatar placeholders and two-line text for user lists, contacts, and comment sections
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.
List with Avatars preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.