Skip to content

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

Free

Team Member Card Skeleton for Ark UI

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

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 React, Ark UI does not load the person.

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