Skeleton

Placeholders that hold the space of content while it loads, so the page does not jump. Pick SkeletonRow for lists and tables, SkeletonText for paragraphs and Skeleton for any other shape.

Skeleton
SkeletonText
SkeletonRow

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Skeleton

Dark theme, Skeleton

High contrast theme, Skeleton

UsageLink to the section Usage

tsx

import { Skeleton, SkeletonText, SkeletonRow } from '@skribly/ui/feedback'

tsx

<div aria-busy={loading}>
  <Spinner label="Loading members" showLabel size="sm" />
  <SkeletonRow />
  <SkeletonRow />
</div>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Skeletons are hidden from screen readers.
Mark the loading container with aria-busy and pair it with a Spinner or a status message that says what is loading.
The pulse stops under reduced motion, and a border keeps the shapes visible in forced colours.

This demo runs through axe in all three themes on every test run. See what the tests check.