Components

Skeleton

Loading placeholder that mimics the shape of the content that will land. Animated pulse using bg-muted. Use it wherever the layout can be reserved before the data arrives.

Updated Jul 10, 2026 by Leonardo Posada

Variants

{/* Card row */}
<div className="flex items-center gap-3">
  <Skeleton className="size-10 rounded-full" />
  <div className="flex flex-1 flex-col gap-2">
    <Skeleton className="h-4 w-1/3" />
    <Skeleton className="h-3 w-1/2" />
  </div>
</div>

{/* Block */}
<Skeleton className="h-24 w-full" />

When to use

  • Card lists, table rows, avatar+label combos while data loads.
  • Any structural loading state where a spinner would feel too abrupt.

When not to use

  • As decoration — Skeleton signals loading state, not visual filler.
  • For very short (<100ms) waits — the flicker distracts.

Usage

Do
  • Match the Skeleton size to the real content dimensions.
  • Remove it as soon as the data is available.
Don't
  • Don't leave it visible for more than 3 seconds — swap to an empty state.