KQ-166 · SKELETON/WEAVE

Skeleton Weave

A placeholder that holds the shape of what is coming, then hands over. A sheen sweeps each row on a diagonal, staggered down the stack so the block reads as one woven surface; when the content arrives the placeholder fades and the real thing rises the last few pixels into place.

KQ-166 · SKELETON/WEAVE

State waiting

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/skeleton-weave

Props

loading: boolean; default —; While true the placeholder holds the space.
rows: string[]; default —; Placeholder row widths; longest first reads like prose.
children: ReactNode; default —; The real content, revealed when loading turns false.

Prop	Type	Default	Description
loading	boolean	—	While true the placeholder holds the space.
rows	string[]	—	Placeholder row widths; longest first reads like prose.
children	ReactNode	—	The real content, revealed when loading turns false.