Skeleton

"use client";

import { Skeleton } from "@/siteplane/components/skeleton";

export default function Example() {
  return (
    <div aria-busy="true" className="flex w-full max-w-92 items-center gap-4">
      <Skeleton aria-hidden="true" className="size-10 rounded-full" />
      <div aria-hidden="true" className="flex flex-1 flex-col gap-1">
        <Skeleton className="h-4 max-w-54" />
        <div className="flex max-w-54 gap-1">
          <Skeleton className="h-4 w-1/2" />
          <Skeleton className="h-4 w-1/2" />
        </div>
      </div>
      <Skeleton aria-hidden="true" className="h-8 w-20" />
      <span className="sr-only" role="status">
        Loading member
      </span>
    </div>
  );
}

Installation

pnpm dlx shadcn@4.18.0 add @siteplane/skeleton

Complete the one-time setup first. Registry JSON lists source files and dependencies.

For this page’s examples, also install:

pnpm dlx shadcn@4.18.0 add @siteplane/card

Usage

import { Skeleton } from "@/siteplane/components/skeleton";

<Skeleton className="h-5 w-40" />;

Card

Mirror the structure of the card that is loading, so the layout does not shift when the content arrives.

"use client";

import { Card, CardHeader, CardPanel } from "@/siteplane/components/card";
import { Skeleton } from "@/siteplane/components/skeleton";

export default function Example() {
  return (
    <Card aria-busy="true" className="w-full max-w-md">
      <CardHeader aria-hidden="true">
        <Skeleton className="h-4 w-2/3" />
        <Skeleton className="h-4 w-1/2" />
      </CardHeader>
      <CardPanel aria-hidden="true">
        <Skeleton className="aspect-video w-full" />
      </CardPanel>
    </Card>
  );
}

Table

Repeat row placeholders sized like the expected columns while table data loads.

"use client";

import { Skeleton } from "@/siteplane/components/skeleton";

const rows = [1, 2, 3, 4, 5];

export default function Example() {
  return (
    <div aria-busy="true" className="flex w-full max-w-sm flex-col gap-2">
      {rows.map((row) => (
        <div key={row} aria-hidden="true" className="flex gap-4">
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 w-24" />
          <Skeleton className="h-4 w-20" />
        </div>
      ))}
    </div>
  );
}

Skeleton accepts native div props, children and refs. className adds dimensions and shape to the rounded animated surface. There are no size, variant, loading or data props; an empty skeleton has no useful height until you supply it. Native attributes follow HTML div.

Read the installed source.

Usage notes

Size the placeholders for the expected content and hide them from assistive technology. The surrounding region owns busy state and the loading announcement, as in the first example. Remove placeholders when data settles, then show real content, an empty state or an error. The shared motion stylesheet handles the skeleton animation; do not communicate progress through animation alone.

Installation

Usage

Card

Table

API reference

Usage notes