Skip to content

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

Free

List with Avatars Skeleton for Ark UI

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

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 React, Ark UI does not know how many people will arrive.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Skeleton anatomy: avatar, title, description, media

Usage

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