Shadcn.io is not affiliated with official shadcn/ui
Multi-line List Items
Rich skeleton list items with title, multiple text lines, and footer badge placeholders for content previews and articles
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.
Multi-line List Items preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.