Shadcn.io is not affiliated with official shadcn/ui
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
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.
Item with Avatar preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
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