Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Table with Avatar
Table component combining shadcn/ui Avatar with user images and fallback initials in first column for rich visual user identification
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Names alone aren't enough—faces make users real. This React table combines shadcn/ui Table with Avatar components showing user profile pictures from GitHub with fallback initials. Built with flex layout gap-3 spacing and AvatarImage with AvatarFallback, the avatar-enhanced table creates visual recognition—perfect for team rosters, user directories, customer lists, admin dashboards, or any interface where putting faces to names improves scannability and makes data feel human rather than abstract.
| User | Role | |
|---|---|---|
HBHayden Bleasel | h****[email protected] | Product Designer |
SHshadcn | s****[email protected] | Developer |
LRLee Robinson | l****[email protected] | VP of Product |
GRGuillermo Rauch | r****[email protected] | CEO |
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Table
Simple table without avatars
Table Without Dividers
Borderless row styling
Striped Table
Alternating row background colors
Avatar
Profile picture component
Card with Avatar
User card with avatar
Badge
Role indicators for tables