Skeleton · Smallest

Text

One 16px bar per line of text. Vary the widths so the block reads as a paragraph, and end on a shorter line.

Shapes

Skeleton is a neutral-150 block with an 8px radius. Size and round it with className to match what loads: an avatar, a pill, a button, a card.

import { Skeleton } from "@smallest-inc/ui";

export default function SkeletonShapes() {
  return (
    <div className="flex items-center gap-4" role="status" aria-label="Loading">
      <Skeleton className="size-10 rounded-full" />
      <Skeleton className="h-7 w-20 rounded-full" />
      <Skeleton className="h-9 w-28 rounded-[10px]" />
      <Skeleton className="h-24 w-40 rounded-[16px]" />
    </div>
  );
}

Entity

A 40px circle with title and description bars, matching a double-line Entity.

import { Skeleton } from "@smallest-inc/ui";

export default function SkeletonEntity() {
  return (
    <div className="flex w-full max-w-sm items-center gap-3" role="status" aria-label="Loading agent">
      <Skeleton className="size-10 shrink-0 rounded-full" />
      <div className="flex flex-1 flex-col gap-2">
        <Skeleton className="h-4 w-1/2" />
        <Skeleton className="h-4 w-4/5" />
      </div>
    </div>
  );
}

In a list

Render placeholder rows inside the real List so row heights, dividers and padding match the loaded state.

import { List, ListItem, Skeleton } from "@smallest-inc/ui";

export default function SkeletonList() {
  return (
    <div className="w-full" role="status" aria-label="Loading agents">
      <List>
        {[0, 1, 2].map((row) => (
          <ListItem key={row} density="default" className="hover:bg-transparent">
            <Skeleton className="size-10 shrink-0 rounded-full" />
            <div className="flex flex-1 flex-col gap-2">
              <Skeleton className="h-4 w-40" />
              <Skeleton className="h-4 w-64" />
            </div>
            <Skeleton className="h-8 w-32 rounded-[10px]" />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

Best practices

When to use

Use while a known layout loads so the content doesn't shift the page when it arrives.
Use Spinner for a short action wait, and Toast only after the action completes.

Behavior

Match the shape and size of the content: 16px bars per text line, rounded-full for avatars and pills, rounded-[10px] for controls.
Render skeleton rows inside the real List or Table so row heights, dividers and padding match the loaded state.
Vary text bar widths and end on a shorter line. The pulse stops under prefers-reduced-motion.

Accessibility

Wrap a loading region in role="status" with a label ("Loading agents") so it's announced once, not per bar.