Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Skeleton - Simple List Items
Simple skeleton list items with small square icon placeholders and flex-1 text lines for basic loading states
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Lists need structure during loading—even simple ones. This React skeleton list uses shadcn/ui Skeleton with small square icons (h-4 w-4 rounded-sm) and flex-1 text lines mapped from Array.from. The minimal pattern shows 5 items with icons and text—perfect for task lists, checkbox lists, menu items, navigation links, file lists, or any interface with simple icon-text list items where showing loading structure improves perceived performance.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
List with Avatars
Avatar plus two text lines
List with Icons
Bordered items with icons
Hierarchical List
Nested indented list
Simple Card
Card skeleton
Checkbox
Real checkbox component
Skeleton Form
Form field skeletons