Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Skeleton - Card with Avatar and Content
A skeleton card with circular avatar placeholder and user content including name, subtitle, and text lines within bordered container
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
User-generated content needs context—avatar shows who posted. This React skeleton card combines shadcn/ui Skeleton with circular avatar (size-12 rounded-full), name and subtitle lines, plus body text in bordered card. The layout mimics social posts and user profiles—perfect for comment sections, social feeds, user profiles, testimonials, team member cards, or any interface displaying user-attributed content where avatar and identity are key to the loading placeholder.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Card
Image and text skeleton
Card with Badges
Badge and tag skeletons
List with Avatars
Avatar list items
Avatar
Real avatar component
Card
Card with border
Skeleton Form
Form loading state
Questions you might have
React Skeleton - Simple Card with Image and Text
A simple skeleton card with rectangular image placeholder and two text line skeletons for loading content previews
React Skeleton - Card with Badge and Tags
A skeleton card with rounded badge placeholders, title, content text lines, and action button skeletons for tagged content loading