Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Skeleton - Hierarchical List Items
Hierarchical skeleton list with indented child items using pl-6 padding for nested navigation and file tree structures
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Flat lists can't show relationships—hierarchy reveals structure. This React skeleton list uses shadcn/ui Skeleton with pl-6 indentation to show parent-child relationships visually. Parent items sit flush left, children indent with pl-6 (24px), creating clear visual hierarchy with simple icon and text pairs. Perfect for file/folder trees, nested navigation menus, documentation tables of contents, outline structures, category trees with subcategories, or any interface where hierarchical relationships between list items define content organization during loading states.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple List Items
Flat icon and text lists
Multi-level Accordion
Nested expandable sections
Sidebar Navigation
Hierarchical navigation menu
List with Icons
Bordered items with icons
Collapsible Card
Expandable nested content
List with Avatars
Two-line avatar lists
Questions you might have
React Skeleton - Multi-line List Items
Rich skeleton list items with title, multiple text lines, and footer badge placeholders for content previews and articles
React Skeleton - User Profile Header
Centered user profile skeleton with large circular avatar, name and subtitle text, and two action buttons for profile headers