Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Simple List Items Skeleton for Svelte

Five one-line list rows, each with a small square beside a bar that fills the rest of the row.

UI library: Ark UI

Five rows, each a small square and one line that fills the rest of the row.

Use it for a menu or a task list with one line per item. If that list has loaded and is empty, Empty is the right screen. In Svelte, Ark UI does not know how many items are coming.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Skeleton anatomy: avatar, title, description, media

Usage

<div class="flex w-full max-w-md flex-col gap-3">{#each ROWS as row (row)}<div class="flex items-center gap-3"><Skeleton class="size-4 rounded-sm" /><Skeleton class="h-4 flex-1" /></div>{/each}</div>

FAQ

How many rows are rendered?

Five. ROWS maps row-1 through row-5 into a max-w-md column with gap-3.

What is in a row?

flex items-center gap-3: a size-4 rounded-sm block and an h-4 flex-1 bar. The bar fills whatever width the icon leaves.

Why is the icon rounded-sm?

rounded-sm replaces the style's default radius on that Skeleton. The text bar keeps the default. Both use bg-muted and animate-pulse.

What keys the rows?

The id from ROWS. The five rows are the same shape, so the key is what tells them apart.

How do I match a real one-line list?

Keep the icon at size-4 and the label at h-4 flex-1 with items-center. The rows stack with gap-3.

Should the list bars be hidden?

Set aria-hidden on each Skeleton when nearby text already says the list is loading. The pulse is decorative.

API Reference

Skeleton

No extra props in this demo. The rest is on the Skeleton page.

All 30 skeleton examples