Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Profile

User Profile Header Skeleton for React

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

Framework
UI library

A loading profile header: a large round avatar, a name and a subtitle, and two buttons, all centered in a bordered frame. Every block is a Skeleton.

Use it at the top of a profile page while the user loads.

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 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.

All 30 skeleton examples