Skip to content
Feedback

Skeleton

Placeholder shimmer for loading content.

React source Astro source Core source

Skeleton

Placeholder shimmer blocks while content loads. Size with style width/height; pick a shape that matches the eventual layout.

Examples

Default

A single text-shaped placeholder.

Demo.tsxtsx
import { Skeleton } from '@var-ui/react';

<Skeleton shape="text" style={{ width: 120, height: 16 }} />

Shapes

Mix text, rect, and circle to sketch a profile row or card while data loads.
Demo.tsxtsx
import { Skeleton } from '@var-ui/react';

<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
  <Skeleton shape="circle" style={{ width: 40, height: 40 }} />
  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
    <Skeleton shape="text" style={{ width: 140, height: 14 }} />
    <Skeleton shape="rect" style={{ width: 200, height: 48 }} />
  </div>
</div>

Props

Accessibility

Skeleton is decorative (aria-hidden). Announce loading on a parent region with aria-busy / live text rather than on the shimmer itself.