PrimitivesStable

Skeleton

Parity report: docs/atoms.md

A loading placeholder. <Skeleton> is a block: width / height (number = px, string = literal; default 100% × 1rem), radius (default md), circle (becomes a square with radius-full, side = width) and animation (pulse default / wave / none).

<SkeletonText> draws N fake text lines: lines (default 3), gap, lastLineWidth (default 60%). Both are decorative (aria-hidden) and respect prefers-reduced-motion.

When to use

Reserving the space of loading content, in roughly its shape (round avatar, text lines, a media block).
Measurable progress of an operation → ProgressBar / ProgressCircle. A short centered spinner → Spinner. "No results" → EmptyState.

Examples

Shapes

<Skeleton circle width={48} />
<Skeleton width={120} height={12} />
<Skeleton width={200} height={40} radius="lg" />

SkeletonText

<SkeletonText lines={4} />

Card placeholder

<div className="card">
  <Skeleton height={140} radius="lg" />
  <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
    <Skeleton circle width={36} />
    <Skeleton width={120} height={12} />
  </div>
  <SkeletonText lines={3} />
</div>

Wave animation

<Skeleton width={280} height={48} radius="lg" animation="wave" />

Playground

animation

radius

circle

<Skeleton width={240} height={16} />

Props

Prop	Type	default	Description
`animation`	`"none" \| "pulse" \| "wave"`	`pulse`	Default `"pulse"`. Respeita `prefers-reduced-motion`.
`circle`	`boolean`	`false`	Círculo — `radius-full` + proporção quadrada (usa `width` como lado).
`height`	`string \| number`	`—`	—
`radius`	`"none" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "full"`	`md`	Raio dos cantos. Default `"md"`. Ignorado quando `circle`.
`width`	`string \| number`	`—`	—

Accessibility

The skeleton is aria-hidden — the container should announce loading, with aria-busy="true" until the data arrives.
The animation stops under prefers-reduced-motion (on top of reset.css's global kill).