Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Profile

Profile with Stats Skeleton for React

A profile placeholder with a large avatar, three lines, three bordered stat boxes and a button.

Framework
UI library

A loading profile with its numbers up front: a large avatar beside three lines, three bordered boxes for stats, and a button across the card. Every block is a Skeleton; the boxes get their border from the div around them.

Use it for creator profiles or dashboards that lead with counts.

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

What wraps this profile?

flex w-full max-w-md flex-col gap-6 rounded-md border p-6. A header, three stat boxes, then a button.

How is the header aligned?

flex items-start gap-4. The circle is size-20 shrink-0 rounded-full. Beside it, gap-2 stacks h-6 w-40, h-4 w-32 and h-4 w-48.

How are the stat boxes built?

grid grid-cols-3 gap-4. Each box is flex flex-col items-center gap-2 rounded-md border p-3, with h-8 w-16 over h-3 w-12.

What is the bar under the stats?

h-10 w-full, so it spans the card. The stat numbers stay w-16 inside their boxes.

Does the avatar use the default skeleton radius?

rounded-full replaces the style's default radius on the size-20 circle. The stat boxes get their border from the div, and the bars inside keep bg-muted.

Should this profile skeleton be announced?

Set aria-hidden on each Skeleton when nearby text already says the profile is loading. A text status should carry that message.

All 30 skeleton examples