Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Skeleton - Multi-line List Items
Rich skeleton list items with title, multiple text lines, and footer badge placeholders for content previews and articles
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Rich content needs more than name and subtitle—show what users will read. This React skeleton list uses shadcn/ui Skeleton with bordered items containing h-5 title, two body text lines, and footer badges (rounded-full pills). Built with flex-col gap-2 stacking and mt-2 footer separation, the pattern shows 3 tall items—perfect for blog post previews, article lists, product descriptions, job postings, event cards, or any interface where multi-line text content with categorization badges defines card-like list structure during loading states.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
List with Avatars
Two-line items with avatars
List with Icons
Bordered items with icons
Card with Badges
Card with badge skeletons
Vertical Card Layout
Image with multi-line content
Simple List Items
Minimal icon and text
Badge
Real badge component
Questions you might have
React Skeleton - List with Icons
Bordered skeleton list items with left category icon, two-line text content, and right action icon for settings and navigation
React Skeleton - Hierarchical List Items
Hierarchical skeleton list with indented child items using pl-6 padding for nested navigation and file tree structures