Geist Design System

Skeleton

Display a skeleton whilst another component is loading.

Default with set width

Default with box height

Wrapping children

If you do not pass a fixed size, it will be calculated automatically.

Wrapping children with fixed size

The skeleton will hide when children are not null, but the size is retained.

Pill

Rounded

Squared

No animation

Best Practices

When to use

  • Show a Skeleton when async data fills a known layout: table rows, card grids, profile blocks, sidebars.
  • For a single in-flight action, use Spinner; for an indeterminate inline wait, use LoadingDots; for known progress, use Progress.
  • Don’t use Skeleton as permanent decoration or as a placeholder for empty states. When there’s no data to load, render an EmptyState.

Behavior

  • Set width and height to match the final content so the layout doesn’t shift when data resolves. A 200×20 block becoming an 80×16 string reads as a glitch.
  • Pick pill, rounded, or squared to mirror the eventual element’s shape (avatars pill, buttons and chips rounded, image tiles squared).
  • When the skeleton wraps children, keep dimensions stable so the reveal swap doesn’t reflow surrounding content.

Accessibility

  • Wrap the loading region in aria-busy="true" and announce completion with aria-live="polite" on the destination container, not the skeleton itself.
  • Disable the shimmer with the no animation variant on low-power surfaces and respect prefers-reduced-motion.
  • Skeletons are decorative; avoid placing focusable controls inside them while loading.