Skip to content

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

Free

Card with Avatar and Content Skeleton for Ark UI

A bordered card placeholder with a round avatar, two name lines and three lines of body text.

A bordered card shows a round avatar, two short lines for the name, and three lines of text that end short, like a paragraph.

Use it for a comment or a feed post while that person loads. If the shape of the result is still unknown, a Spinner is enough. In React, Ark UI does not swap the bars for the text.

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-sm flex-col gap-3 rounded-md border p-4">
  <div className="flex items-center gap-3">
    <Skeleton className="size-12 rounded-full" />
    <div className="flex flex-1 flex-col gap-2">
      <Skeleton className="h-4 w-24" />
      <Skeleton className="h-3 w-32" />
    </div>
  </div>
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-5/6" />
  <Skeleton className="h-4 w-4/6" />
</div>

FAQ

What wraps this card?

flex w-full max-w-sm flex-col gap-3 rounded-md border p-4. The header and the three text bars stack in that column.

How is the avatar row built?

flex items-center gap-3 holds a size-12 rounded-full circle and a flex-1 column with gap-2. The name bar is h-4 w-24. The line under it is h-3 w-32.

Why are the body lines different widths?

They are h-4 w-full, h-4 w-5/6 and h-4 w-4/6. The shorter lines read as a paragraph ending. Match the count to the text you swap in.

What makes the avatar a circle?

rounded-full on that Skeleton. Skeleton's own radius comes from your style, and rounded-full replaces it. The text bars keep the default radius.

How do I keep the card from jumping?

Give the circle the same size as the avatar you render, and keep the three h-4 bars in line with the real paragraph. size-12 is the circle in this file.

Should the card skeleton be hidden?

Yes, when a status nearby already says the card is loading. Set aria-hidden on each Skeleton. The pulse should not be the only loading message.

API Reference

Skeleton

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

All 30 skeleton examples