Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Skeleton - Table with Avatars
A user list table skeleton with circular avatars and names in the first column for person-centric data displays
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
User tables need faces—avatars make data human. This React table skeleton combines size-8 rounded-full avatars with text in the first column using flex items-center gap-3. Built with shadcn/ui Skeleton component with flex-shrink-0 on avatars, the layout prevents avatar squishing—perfect for user directories, team lists, customer tables, contact management, comment authors, or any table where showing people improves recognition and engagement.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Table Rows
Basic table without avatars
Table with Actions
Table with action button columns
Comment Thread
Comments with avatars and text
Avatar
Avatar component with image and fallback
Expandable Rows
Table with expandable detail rows
Table
Standard table component
Questions you might have
React Skeleton - Table with Actions
A table skeleton with five columns including an actions column with dual icon buttons for edit and delete operations
React Skeleton - Expandable Rows
A table skeleton with expandable row detail sections showing one expanded state with indented content and expand indicators