Shadcn.io is not affiliated with official shadcn/ui
Hierarchical List Items
Hierarchical skeleton list with indented child items using pl-6 padding for nested navigation and file tree structures
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.
Hierarchical List Items preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.