Skip to content
Try free

Skeleton

Placeholder shapes in an aria-busy region while content loads; the shimmer stops under reduced motion.

  • Free core, MIT
  • Version 2.0.0-rc.1
  • APG pattern: aria-busy region

Examples

These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.

Default

Loading members
Show the code

Default, code

const Placeholder = () => (
  <div className="flex items-center gap-gap-md">
    <Skeleton shape="circle" />
    <div className="flex flex-1 flex-col gap-stack-xs"><Skeleton className="w-1/2" /><Skeleton className="w-3/4" /></div>
  </div>
);

<div className="max-w-md"><SkeletonGroup label="Loading members" isLoading placeholder={<><Placeholder /><Placeholder /></>} /></div>

Block

Loading preview
Show the code

Block, code

<div className="max-w-md"><SkeletonGroup label="Loading preview" isLoading placeholder={<Skeleton shape="block" />} /></div>

Tokens

The 5 design tokens Skeleton reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 5 tokens
Tokens Skeleton reads
TokenValue nowCSS variable
color.bg.muted…--sd-color-bg-muted
radius.full…--sd-radius-full
radius.sm…--sd-radius-sm
shape.radius-surface…--sd-shape-radius-surface
spacing.stack.sm…--sd-spacing-stack-sm

Install

The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).

Install

npm i @superduperui/react @superduperui/tokens

Import

import { Skeleton, SkeletonGroup } from "@superduperui/react"

Props

Skeleton also takes the props of the React Aria component it’s built on.

Skeleton props
PropTypeWhat it does
shape'line' | 'block' | 'circle'Default 'line'Shape: a line of text, a block (image, card) or a circle (avatar). Default line.

When to use it

Use it for

  • First load of lists, cards and profiles

Use something else for

  • Short waits in a control: use Spinner
  • Errors: use EmptyState with a retry

Accessibility

Screen readers announce "Loading members" (status), region busy.

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.3.2, 2.3.3.

Not interactive: density changes spacing only.

What your product still has to do

  • Label the SkeletonGroup with what is loading

This release’s test results

Test results for Skeleton in this release
axe-core (WCAG A, AA, AAA and best practice)60 runs across every story, theme, density and width: 0 violations
Rendered text contrast25 text runs: 0 below 7:1, lowest 16.71:1
Target size0 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)0 focus stops in 0 browser engines: all pass

Manual passes with VoiceOver and NVDA haven’t been done yet.

In Figma

The Figma component is Skeleton, with Shape (Line, Block, Circle). The Figma library isn’t published yet.

Figma to code: Shape → shape (Line = "line", Block = "block", Circle = "circle").