Skip to content

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

Free

User Profile Header Skeleton for React

A centered profile header placeholder with a large avatar, a name, a subtitle and two buttons.

A bordered frame centers a large round avatar, a name, a subtitle, and two button-sized bars.

Use it at the top of a profile while that user loads. If you have no layout to protect yet, a Spinner is enough. In React, Base UI does not fetch the user.

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

FAQ

How is the header centered?

flex w-full max-w-md flex-col items-center gap-4 rounded-md border p-6. The circle, the name and the buttons center in that column.

How big is the avatar?

size-24 rounded-full. That class replaces the style's default radius on Skeleton.

What is under the circle?

A w-full column with items-center gap-2: h-6 w-40 for the name and h-4 w-32 for the subtitle.

How are the two actions shown?

flex w-full justify-center gap-2 of two h-9 w-24 bars. Match h-9 to your buttons: the default height depends on the style.

How do I keep the header from jumping?

Match size-24 to the photo you render, h-6 to the name, and h-9 w-24 to each button. The frame stays max-w-md with p-6.

Should the header bars be hidden?

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

API Reference

Skeleton

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

All 30 skeleton examples