Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Profile

Team Member Card Skeleton for React

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

Framework
UI library

A loading card for one person on a team page: everything centered, with a round avatar, a name and a role, two lines of bio, and three small circles for social links. Every block is a Skeleton.

Use it in a grid of team or contributor cards.

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

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.

All 30 skeleton examples