Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Skeleton - List with Avatars
Skeleton list items with circular avatar placeholders and two-line text for user lists, contacts, and comment sections
React Skeleton - Multi-line List Items
Rich skeleton list items with title, multiple text lines, and footer badge placeholders for content previews and articles