Skip to content

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

Free

List with Avatars Skeleton for Solid

Four people rows, each with a round avatar, a longer name line and a shorter line under it.

UI library: Ark UI

Four rows stand in for people. Each keeps a round avatar at a fixed size, with a longer line for the name and a shorter line under it.

Use it for contacts or members while the list loads. If the request finished and nobody is there, show Empty. In Solid, Ark UI does not know how many people will arrive.

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-4">
    {ROWS.map(() => <div class="flex items-center gap-3">
        <Skeleton class="size-10 shrink-0 rounded-full" />
        <div class="flex flex-1 flex-col gap-2">
          <Skeleton class="h-4 w-3/4" />
          <Skeleton class="h-3 w-1/2" />
        </div>
      </div>)}
  </div>

FAQ

How many rows are in the list?

Four. ROWS maps row-1 through row-4 into a max-w-md column with gap-4.

What is in each row?

flex items-center gap-3: a size-10 shrink-0 rounded-full circle and a flex-1 column with gap-2. The lines are h-4 w-3/4 and h-3 w-1/2.

Which avatar size does size-10 match?

size-10 is the large Avatar, size="lg". shrink-0 keeps that circle from squeezing against the flex-1 text.

What makes the circle round?

rounded-full on the avatar Skeleton. Text bars keep the style's default radius. bg-muted and animate-pulse come from Skeleton itself.

What is the row key?

The string from ROWS, row-1 and so on. The bars are the same on every row.

Should the list skeleton be hidden?

Set aria-hidden on each Skeleton when nearby text already says the list is loading. The circles and lines are decorative.

API Reference

Skeleton

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

All 30 skeleton examples