Skeleton

Alpha

A loading placeholder with aria-busy and screen reader announcements. Replaces content with animated shapes while data loads.

Import

import { Skeleton } from "@compa11y/react";

Usage

Example.tsx

import { Skeleton } from "@compa11y/react";

// Loading card placeholder
function CardSkeleton() {
  return (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <Skeleton variant="circular" width={48} height={48} />
      <div style={{ flex: 1 }}>
        <Skeleton variant="text" width="60%" />
        <Skeleton variant="text" width="40%" />
      </div>
    </div>
  );
}

// Loading content area
function ContentSkeleton() {
  return (
    <div>
      <Skeleton variant="rectangular" width="100%" height={200} />
      <Skeleton variant="text" count={3} />
    </div>
  );
}

Features

aria-busy='true' with aria-label for screen readers
Three variants: text, circular, rectangular
Wave and pulse animation modes
Configurable width, height, and count
Respects prefers-reduced-motion

Props

Skeleton component props
Prop	Type	Default	Description
`variant`	`'text' \| 'circular' \| 'rectangular'`	`'text'`	Shape variant
`width`	`string \| number`	-	Custom width
`height`	`string \| number`	-	Custom height
`count`	`number`	`1`	Number of skeleton lines to render
`animation`	`'wave' \| 'pulse'`	`'wave'`	Animation style

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Skeleton
Key	Action