Skeleton
Used to show a placeholder while content is loading.
<div class="flex items-center gap-4">
<div class="skeleton size-10 shrink-0 rounded-full"></div>
<div class="grid gap-2">
<div class="skeleton h-4 w-[150px]"></div>
<div class="skeleton h-4 w-[100px]"></div>
</div>
</div>
Usage
Use the skeleton class with sizing utilities to create loading placeholders.
<div class="flex items-center gap-4">
<div class="skeleton size-10 shrink-0 rounded-full"></div>
<div class="grid gap-2">
<div class="skeleton h-4 w-[150px]"></div>
<div class="skeleton h-4 w-[100px]"></div>
</div>
</div>Examples
Avatar
<div class="flex items-center gap-4">
<div class="skeleton size-12 rounded-full"></div>
<div class="grid gap-2">
<div class="skeleton h-4 w-32"></div>
<div class="skeleton h-4 w-48"></div>
</div>
</div>
Card
<div class="card w-full @md:w-auto @md:min-w-sm">
<header>
<div class="skeleton h-4 w-2/3"></div>
<div class="skeleton h-4 w-1/2"></div>
</header>
<section>
<div class="skeleton aspect-square w-full"></div>
</section>
</div>
Text
<div class="grid gap-2">
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-5/6"></div>
<div class="skeleton h-4 w-2/3"></div>
</div>
Form
<div class="grid gap-4 w-full max-w-sm">
<div class="skeleton h-4 w-24"></div>
<div class="skeleton h-9 w-full"></div>
<div class="skeleton h-4 w-32"></div>
<div class="skeleton h-9 w-full"></div>
</div>
Table
<div class="grid gap-3 w-full">
<div class="skeleton h-8 w-full"></div>
<div class="skeleton h-8 w-full"></div>
<div class="skeleton h-8 w-full"></div>
</div>
RTL
Skeleton blocks are direction-neutral. Use logical layout utilities around them when spacing depends on direction.
<div dir="rtl" class="flex items-center gap-4">
<div class="skeleton size-10 shrink-0 rounded-full"></div>
<div class="grid gap-2">
<div class="skeleton h-4 w-[150px]"></div>
<div class="skeleton h-4 w-[100px]"></div>
</div>
</div>