Skeleton·component·@astryxdesign/core

Skeleton

An animated shimmer placeholder that previews the shape of content while it loads. Use it to build loading screens that match the layout of the real content. For content with unknown dimensions, use Spinner instead.

Open in Playground @astryxdesign/core/Skeleton

Showcases and examples

4 documented examples

Skeleton

A skeleton loading placeholder.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · skeleton-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {Skeleton} from '@astryxdesign/core/Skeleton';
import {HStack, VStack} from '@astryxdesign/core/Layout';

export default function SkeletonShowcase() {
  return (
    <VStack gap={4} width={300}>
      <HStack gap={4} vAlign="center">
        <Skeleton width={64} height={64} radius="rounded" index={0} />
        <VStack gap={2}>
          <Skeleton width={160} height={20} index={1} />
          <Skeleton width={80} height={16} index={2} />
        </VStack>
      </HStack>
      <VStack gap={2}>
        <Skeleton width="90%" height={16} index={3} />
        <Skeleton width="100%" height={16} index={4} />
        <Skeleton width="75%" height={16} index={5} />
      </VStack>
    </VStack>
  );
}

Usage

Match the size and shape of the content being loaded to create a realistic placeholder.
Stagger multiple skeletons with the index prop for a natural wave animation.
Use when the content dimensions are unknown; use Spinner instead.
Combine with a Spinner on the same content area; pick one loading pattern.
Show skeletons indefinitely; if loading takes too long, show an error or empty state instead.

Typed props

Prop	Type and behavior
`width`	`number \| string` · default '100%' Width in pixels (number) or CSS value (string).
`height`	`number \| string` · default '100%' Height in pixels (number) or CSS value (string).
`radius`	`'none' \| 0 \| 1 \| 2 \| 3 \| 4 \| 'rounded'` · default 3 Border radius using design token scale. Use none for sharp corners, rounded for fully rounded (avatars, pills, circles).
`index`	`number` · default 0 Index for staggered animation timing. For element at index n, animation starts at DELAY_TIME + (STAGGER_TIME × n).

Anatomy

Placeholder · required

Painted shape that stands in for content while it loads.

Theming

Targets

astryx-skeleton