Skeleton

A skeleton is a placeholder for content that is loading. By rendering a neutral block where real content will eventually appear, you give the user an early sense of layout and reduce both perceived loading time and Cumulative Layout Shift (CLS).

When to use

• Async-loaded content where the eventual shape is predictable (lists, cards, tables, avatars).
• On initial page load, before data has resolved.

When not to use

• For very short fetches (under ~200 ms) — a flash of skeleton is more distracting than helpful.
• To convey error or empty states. Use Empty instead.
• As a permanent decorative shape.

Sizing

Default height is 1rem. Override className with h-*, w-*, and rounded-* utilities to match the real content's dimensions — the more closely the skeleton matches, the less layout shift on swap.

Accessibility

Skeletons are decorative and convey no semantic meaning to assistive tech. If the underlying region is loading, also announce it to screen readers — e.g. wrap in an element with role="status" and a visually-hidden "Loading…" label.

1<div role="status" aria-live="polite">⋯2	<span className="sr-only">Loading profile…</span>3	<Skeleton className="h-12 w-12 rounded-full" />4</div>

1import { Skeleton } from "@ngrok/mantle/skeleton";2 3<Skeleton className="w-full" />;

Examples

Composition: Skeleton within a Media Object

The Skeleton component can be included within components. You can also pass Tailwind utility classes for further control.

1import { MediaObject } from "@ngrok/mantle/media-object";2import { Skeleton } from "@ngrok/mantle/skeleton";3 4<MediaObject.Root className="w-full max-w-96 items-center">⋯5	<MediaObject.Media>⋯6		<Skeleton className="h-12 w-12 rounded-full" />7	</MediaObject.Media>8	<MediaObject.Content className="space-y-3">⋯9		<Skeleton className="w-full" />10		<Skeleton className="w-4/5" />11	</MediaObject.Content>12</MediaObject.Root>;

API Reference

Skeleton

The Skeleton accepts the following props in addition to the standard HTML div attributes.