Skip to content

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

Free

User Profile Header Skeleton for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not fetch the user.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Skeleton anatomy: avatar, title, description, media

Usage

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