Skeleton

A measured placeholder that preserves layout while content loads.

Interactive preview

Live specimenTry the component

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add skeleton

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

React

<div role="status" aria-label="Loading workspace">
  <Skeleton style={{ width: 160, height: 16 }} />
</div>

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`className`	`string`	`—`
`style`	`CSSProperties`	`—`

Skeleton is aria-hidden. Put a loading message on its container. Animation respects prefers-reduced-motion.