Skip to content

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

Free

Team Member Card Skeleton for Solid

A centered team member card placeholder with an avatar, a name, a role, a bio and three social icons.

UI library: Ark UI

Everything is centered: a round avatar, a name, a role, two lines of bio, and three small circles for social links.

Use it in a grid of team or contributor cards while the people load. A seat that is actually vacant is clearer as Empty. In Solid, Ark UI does not load the person.

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-xs flex-col items-center gap-4 rounded-md border p-6 text-center">
    <Skeleton class="size-20 rounded-full" />
    <div class="flex w-full flex-col items-center gap-2">
      <Skeleton class="h-5 w-32" />
      <Skeleton class="h-4 w-24" />
    </div>
    <Skeleton class="h-4 w-full" />
    <Skeleton class="h-4 w-5/6" />
    <div class="flex gap-2 pt-2">
      <Skeleton class="size-8 rounded-full" />
      <Skeleton class="size-8 rounded-full" />
      <Skeleton class="size-8 rounded-full" />
    </div>
  </div>

FAQ

How is the card centered?

flex w-full max-w-xs flex-col items-center gap-4 rounded-md border p-6 text-center. The circle, the name group, the bio and the icons all center in that column.

How big is the avatar circle?

size-20 rounded-full. rounded-full replaces the radius Skeleton gets from your style.

What sits under the circle?

A w-full column with items-center gap-2: h-5 w-32 for the name and h-4 w-24 for the role. The bio is h-4 w-full and h-4 w-5/6.

How are the social icons drawn?

flex gap-2 pt-2 of three size-8 rounded-full bars. They are circles, the same radius treatment as the avatar, at a smaller size.

How do I match a real team card?

Keep items-center, size-20 for the photo, two bio lines, and three size-8 circles if you show three social links. max-w-xs is the card width in this file.

Should the team card bars be hidden?

Set aria-hidden on each Skeleton when nearby text already says the card 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