Tailwind CSS Skeleton

Use the skeleton component to show a pulsing placeholder in the shape of content while it loads, like a card, a table, or a form. For progress with a known duration, reach for the progress bar.

<div class="flex items-center gap-4">
  <div class="skeleton size-12 rounded-full"></div>
  <div class="flex flex-col gap-2">
    <div class="skeleton h-4 w-[250px]"></div>
    <div class="skeleton h-4 w-[200px]"></div>
  </div>
</div>

Usage

Add the skeleton class to an element and size it with width and height utilities to match the content it stands in for. It comes with the muted fill, rounded corners, and pulse animation, so shape it into bars, circles, or blocks.

Class	Description
`skeleton`	Add to a placeholder element

<div class="skeleton h-4 w-48"></div>

Examples

Avatar skeleton

A circle for the avatar and two bars for the text beside it.

<div class="flex w-fit 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>

Card skeleton

Skeletons standing in for a card's text and media.

<div class="card w-full max-w-xs">
  <div class="card-header">
    <div class="skeleton h-4 w-2/3"></div>
    <div class="skeleton h-4 w-1/2"></div>
  </div>
  <div class="card-content">
    <div class="skeleton aspect-video w-full"></div>
  </div>
</div>

Text skeleton

A paragraph placeholder from stacked bars.

<div class="flex w-full max-w-xs flex-col gap-2">
  <div class="skeleton h-4 w-full"></div>
  <div class="skeleton h-4 w-full"></div>
  <div class="skeleton h-4 w-3/4"></div>
</div>

Form skeleton

Label and field pairs while a form loads.

<div class="flex w-full max-w-xs flex-col gap-7">
  <div class="flex flex-col gap-3">
    <div class="skeleton h-4 w-20"></div>
    <div class="skeleton h-8 w-full"></div>
  </div>
  <div class="flex flex-col gap-3">
    <div class="skeleton h-4 w-24"></div>
    <div class="skeleton h-8 w-full"></div>
  </div>
  <div class="skeleton h-8 w-24"></div>
</div>

Table skeleton

Repeated rows of columns for tabular data.

<div class="flex w-full max-w-sm flex-col gap-2">
  <div class="flex gap-4">
    <div class="skeleton h-4 flex-1"></div>
    <div class="skeleton h-4 w-24"></div>
    <div class="skeleton h-4 w-20"></div>
  </div>
  <div class="flex gap-4">
    <div class="skeleton h-4 flex-1"></div>
    <div class="skeleton h-4 w-24"></div>
    <div class="skeleton h-4 w-20"></div>
  </div>
  <div class="flex gap-4">
    <div class="skeleton h-4 flex-1"></div>
    <div class="skeleton h-4 w-24"></div>
    <div class="skeleton h-4 w-20"></div>
  </div>
  <div class="flex gap-4">
    <div class="skeleton h-4 flex-1"></div>
    <div class="skeleton h-4 w-24"></div>
    <div class="skeleton h-4 w-20"></div>
  </div>
  <div class="flex gap-4">
    <div class="skeleton h-4 flex-1"></div>
    <div class="skeleton h-4 w-24"></div>
    <div class="skeleton h-4 w-20"></div>
  </div>
</div>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.

<div id="skeleton-rtl-demo" dir="rtl" class="flex items-center gap-4">
  <div class="skeleton size-12 rounded-full"></div>
  <div class="flex flex-col gap-2">
    <div class="skeleton h-4 w-[250px]"></div>
    <div class="skeleton h-4 w-[200px]"></div>
  </div>
</div>
 
<script>
  window.addEventListener("message", (e) => {
    if (e.data?.type !== "sp-language") return;
    document.getElementById("skeleton-rtl-demo").dir =
      e.data.lang === "en" ? "ltr" : "rtl";
  });
</script>