Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Item with Avatar
A React user list item with Avatar in ItemMedia, name title, last seen description, and Plus icon invite button built with shadcn/ui Item
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Generic user lists lack personalization and visual identity. This React pattern shows Item with ItemMedia containing size-10 Avatar with image and fallback, ItemTitle with user name, ItemDescription showing Last seen, and ItemActions with rounded Plus button—creates personal recognizable user entry. Built with shadcn/ui Item, Avatar components, and Lucide React Plus icon, it's perfect for user lists, contact directories, team members, social connections, search results, or any list representing people where avatar provides instant recognition and personalization.
Last seen 5 months ago
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Item with Icon Media
Item with icon variant
Item with Image
Item with image thumbnail
Avatar Component
Standalone avatar with fallback
User Card
User profile card
Contact List
List of contacts
Icon Button
Button with icon only
Questions you might have
React Item with Icon Media
A React list item with ItemMedia icon variant showing ShieldAlertIcon, security alert title, description, and review button built with shadcn/ui Item
React Item with Image Media
A React music list using ItemGroup with clickable Items showing album art in ItemMedia image variant, song titles, artists, and duration built with shadcn/ui