Skeleton

A loading placeholder. Set loading={false} to swap the skeleton for your real content. Announces itself as a polite live region while loading.

Features

Toggles between placeholder and children via loading prop.

Accessible: role="status", aria-busy, aria-live="polite".

Customizable aria-label for screen readers.

Zero baked-in animation — style with your own classes.

Example

Anatomy


import { Skeleton } from '@wire-ui/react'
 
<Skeleton loading={isLoading}>
<p>Loaded content</p>
</Skeleton>

Styling

Skeleton renders as an empty <div> with data-loading. Size, color, and animation are entirely up to you — typically a pulsing background with a fixed width and height.


<Skeleton className="animate-pulse rounded-[8px] bg-[#e5e5e5] h-4 w-48" />

Using data attributes

Skeleton sets data-loading="" while in the placeholder state. Use it to scope styles or query active skeletons.


[data-loading] {
  background: #e5e5e5;
  animation: pulse 1.5s ease-in-out infinite;
}

Props

Prop	Type	Default	Description
`loading`	`boolean`	`true`	When `false`, renders children instead of the skeleton
`aria-label`	`string`	`'Loading'`	Announced to screen readers while loading
`...rest`	`HTMLAttributes<HTMLDivElement>`	—	All standard HTML div attributes

Data attributes

Attribute	When present
`data-loading`	Always present on the rendered placeholder

Accessibility

Renders with role="status", aria-busy="true", and aria-live="polite" while loading.
The aria-label (default "Loading") is announced to screen readers.
Once loading={false}, the element is replaced entirely by children — no lingering ARIA state.