vert-ui
Browse docs
All components

Skeleton

Shape-matched loading placeholder. Decorative by design: it is aria-hidden, so mark your loading region itself with aria-busy.

Preview

Live preview

Usage

Examples

Card placeholder

<div aria-busy={loading}>
  {loading ? (
    <Card>
      <CardHeader><Skeleton className="h-5 w-2/3" /></CardHeader>
      <CardContent><Skeleton className="h-4 w-full" /></CardContent>
    </Card>
  ) : (
    <Card>…actual content…</Card>
  )}
</div>

Matching text metrics

<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-11/12" />

Reference

Props

PropTypeDefaultDescription
className(required)string—Sets the placeholder dimensions (height/width/rounded) — the only prop you need.
...propsHTMLAttributes<HTMLDivElement>—Any div attribute (style, data-*, aria-*).

Accessibility

Accessibility notes

  • Skeletons render aria-hidden, so assistive tech never reads placeholder shapes.
  • Put aria-busy on the region that is loading, and announce completion with a live region if the result matters.
  • The pulse is opacity-only and has motion-reduce:animate-none — reduced-motion users see a static block.
  • Size the skeleton like the content it replaces so nothing jumps when real content arrives.