Skip to content
Helm Design System

Skeleton

Skeleton is a pulsing gray block you size with utility classes to mimic the shape of content that has not loaded yet. Compose several skeletons to preview the structure of a row, card, or avatar so the page does not jump when real data arrives.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: skeleton.tsx

import { Skeleton } from "@beacon/design-system";


// Mimic an avatar next to two lines of text.
<div className="flex items-center space-x-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>;

Props

PropTypeDefaultDescription
classNamestring—Sizing and shape classes (height, width, radius). This is how you control each placeholder’s footprint.

Skeleton is a div and forwards all standard div attributes.

When to use

  • Holding layout for lists, tables, and detail panels while data is fetching.
  • Previewing the shape of a card or row so the load feels intentional rather than blank.
  • Reducing layout shift on slow connections.

Do not use Skeleton for an indeterminate spinner in a button or small inline control; use Spinner for that. For a full empty data view, use EmptyState.