Skeleton

Reserves space with reduced motion; no endless fake loading.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add skeleton

What add skeleton installs alongside the component. The CLI skips any you already have in a compatible version.

1 examples · 1 component

Keeps the layout stable while the content loads.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`className` Sets the size and shape of the block.	`string`	—

The states that apply to this component and their visual treatment.

State	Treatment
Loading	Reserves the content's space with a gentle pulse.
Reduced motion	The pulse stops with prefers-reduced-motion.
Semantics	aria-hidden: communicate loading with adjacent text or role="status".

It is aria-hidden: it announces no content. Communicate the loading state with adjacent text or role="status".

Respects prefers-reduced-motion: the animation stops when reduced motion is requested.