Skeleton

<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-[250px]"></div>
    <div class="skeleton h-4 w-[200px]"></div>
  </div>
</div>

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import only the base CSS, Skeleton component CSS, and one style pack.

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/skeleton.css";
@import "basecoat-css/styles/vega.css";

Using CDN or bundler imports? See the Installation page.

Add your skeleton HTML

Add class="skeleton" with sizing utilities to create loading placeholders.

<div class="skeleton h-4 w-[150px]"></div>

Examples

Avatar

<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>

Card

<div class="card w-full">
  <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-video w-full"></div></section>
</div>

Text

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

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

Table

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

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>