Skeleton

Overview

Skeleton is a low-fidelity, animated placeholder that stands in for content while it loads. Showing the rough shape of the incoming UI keeps layout stable and feels faster than a spinner, because the page doesn’t jump when data arrives.

For a full-screen blocking indicator, use Loading Overlay.

Usage

Import the component:

import { Skeleton } from "@eqtylab/equality";

Size it with utility classes to match the content:

<Skeleton className="h-12 w-full" />

Show a skeleton while data is loading, then swap in the real content:

{
  isLoading ? <Skeleton className="h-6 w-40" /> : <p>{user.name}</p>;
}

Examples

Single Line

Shapes

Use border-radius and sizing utilities to match different elements — a circle for an avatar, short bars for text. Skeleton sets its own radius, so a radius utility needs the ! modifier, as in rounded-full!.

Card Placeholder

Compose several skeletons to stand in for a whole block of content.

Usage

{
  /* Avatar + text */
}
<div className="flex items-center gap-4">
  <Skeleton className="rounded-full! size-12" />
  <div className="flex flex-col gap-2">
    <Skeleton className="h-4 w-40" />
    <Skeleton className="h-4 w-24" />
  </div>
</div>;

Props

Skeleton accepts all standard div attributes. Size and shape it with className.