Shadcn.io is not affiliated with official shadcn/ui
List with Icons
Bordered skeleton list items with left category icon, two-line text content, and right action icon for settings and navigation
Clickable lists need visual affordances—icons on both ends signal content type and actions available. This React skeleton list uses shadcn/ui Skeleton with bordered items containing size-8 left icons, two text lines, and size-8 right icons (typically chevrons or actions). Built with rounded-md border p-3 containers and flex-shrink-0 to lock icon sizes, the pattern shows 5 bordered items—perfect for settings menus, file lists with actions, navigation with disclosure indicators, document lists, interactive cards, or any interface where bordered clickable list items with category and action icons define structure during loading.
List with Icons preview
Installation
Related Components
Simple List Items
Basic icon and text without borders
List with Avatars
User-focused circular avatars
Card with Badges
Bordered cards with badges
Multi-line List Items
Rich content with multiple lines
Simple Card
Basic card skeleton
Button
Real button component
FAQ
Was this page helpful?
Sign in to leave feedback.