Skeleton

Feedback · src/components/Skeleton/Skeleton.tsx

The shape of content that has not arrived, so the layout does not jump when it does.

Right when the shape is known and the wait is short. Wrong as a permanent state: a skeleton that never resolves is a page pretending to work. For an unknown wait use Loader, which can at least say so.

Always aria-hidden. A screen reader has nothing to gain from placeholder bars, and the real status belongs on a Loader or a live region beside it.

The last line of a multi-line block is 62% wide, because a paragraph does not end flush and a stack of equal bars reads as a table.

Import

import { Skeleton } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
variant	'text' | 'rect' | 'circle'
width	number | string
height	number | string
size	number	Diameter, for circle.
lines	number	How many lines, for text. The last one is short, the way a paragraph ends.
className	string
style	React.CSSProperties