Skeleton

Placeholder shapes while real content loads.

Loading card

<div class="flex items-center gap-3">
  <Skeleton className="size-10 rounded-full" />
  <div class="flex-1 space-y-2">
    <Skeleton className="h-4 w-1/2" />
    <Skeleton className="h-3 w-1/3" />
  </div>
</div>
<div class="space-y-2">
  <Skeleton className="h-3 w-full" />
  <Skeleton className="h-3 w-full" />
  <Skeleton className="h-3 w-2/3" />
</div>

Form

Form — label + field placeholders

<div class="space-y-2">
  <Skeleton className="h-3 w-24" />
  <Skeleton className="h-9 w-full rounded-md" />
</div>

Table

Table — header + repeating rows

Wrapping children

Publish note

Wraps children — sized to a button

Fixed size — 160×36

// sizes to the content it stands in for
<Skeleton className="inline-block">
  <span className="invisible px-4 py-2 text-sm font-medium">Publish note</span>
</Skeleton>

// wrapping with an explicit fixed size
<Skeleton className="inline-flex h-9 w-40" />

Squared & no animation

Squared — rounded-none

No animation — animate-none

// squared corners override the default rounded-md
<Skeleton className="h-10 w-40 rounded-none" />

// disable the pulse
<Skeleton className="h-10 w-40 animate-none" />

Markdown for agents: /design/skeleton.md · spec: /design.md