Skeleton

Skeleton is a loading placeholder block with a pulse animation. Use it to indicate that content is loading without a full-page spinner.

ExamplesCodeUsageChangelog

Basic usage

Tailwind v4

<Skeleton />

Renders a 100%-wide, 1rem-tall rounded rectangle with a pulse animation.

Width and height

Tailwind v4

<Skeleton width="60%" height="1rem" />
<Skeleton width="200px" height="2rem" />
<Skeleton width="100%" height="0.75rem" />

Both width and height accept any valid CSS length.

Rounded (circular)

Use rounded for avatars or circular indicators:

Tailwind v4

<Skeleton width="40px" height="40px" :rounded="true" />

List skeleton pattern

Tailwind v4

<div v-if="loading" class="space-y-2">
  <div v-for="i in 5" :key="i" class="flex items-center gap-3">
    <Skeleton width="36px" height="36px" :rounded="true" />
    <div class="flex-1 space-y-1.5">
      <Skeleton height="0.875rem" width="40%" />
      <Skeleton height="0.75rem" width="70%" />
    </div>
  </div>
</div>

Props

Prop	Type	Default	Description
width	string	—	CSS width (defaults to 100%)
height	string	'1rem'	CSS height
rounded	boolean	false	rounded-full instead of rounded-md