shadcn.io is not affiliated with official shadcn/ui
Skeleton examples · List
Hierarchical List Items Skeleton for React
A tree placeholder of icon and label rows, some of them indented as children.
A loading tree: rows of a small icon block and a label bar, with child rows indented under their parent. The indent is logical padding, so it follows the writing direction; the blocks are Skeleton elements.
Use it for file trees, nested navigation or a table of contents.
Preview
Installation
FAQ
What does one row contain?
flex items-center gap-3: a size-4 rounded-sm icon and an h-4 flex-1 label. The list is max-w-md with gap-3.
How are the child rows indented?
Child rows add ps-6 on the same flex row. ps-6 is logical padding, so the indent follows the writing direction. Parent rows have no ps-6.
Which rows are children?
Five rows. The first is a parent, the next two are ps-6 children, then another parent, then one ps-6 child. Nothing in the file toggles them.
Why is the icon rounded-sm?
rounded-sm replaces the radius Skeleton gets from your style, so the icon block has its own small radius. The label keeps the default radius.
Related
- Simple List Items SkeletonFive list rows, each with a small icon
- Multi-Level Nested AccordionAn accordion of help center topics where
- List with Icons SkeletonFive bordered list rows with a leading
- Card CollapsibleA card with a Features header that
- List with Avatars SkeletonFour list rows, each with a round avatar
- Multi-line List Items SkeletonThree bordered list items with a title