Skeleton

Implemented

Loading skeleton — radius matched to whatever it's skeletonizing. Use while Server Components fetch data.

Categoryatoms

Sourcepatterns/atoms/skeleton.html

AI HintLoading placeholder block with width/height/radius presets and a count multiplier. Mark the loading region aria-busy and swap in real content once loaded.

Loading placeholder block. Animates a subtle pulse. FR-CA: Espace réservé de chargement.

Skeleton

Display atom (Family 2 — Tier 1)

Use Skeleton instead of Spinner when you know the final content shape.

This component supports light and dark mode.

Usage

import { Skeleton } from '@epasslive/design-system'

<Skeleton width="100%" height={120} radius="lg" />
<Skeleton count={3} height={14} />
<Skeleton width={48} height={48} radius="full" />

When to use

Initial load of lists, cards, and table rows.
Suspense boundaries that gate content above the fold.

Accessibility

The component renders aria-hidden="true" and is decorative. Wrap the loading region in aria-busy="true" on the parent.

Props

Prop

Type

Default

Description

width

number | string

—

CSS width (px if number).

height

number | string

—

CSS height (px if number).

radius

'sm' | 'md' | 'lg' | 'full'

md

Border-radius preset.

count

number

1

Number of stacked skeletons.

className

string

—

Additional classes.

Props

Preview

Skeleton

Prop

Type

Required

Default

Description

width

number | string

Optional

—

Synced from source — no interface JSDoc yet; document on `Skeleton.tsx`.

height

number | string

Optional

—

Synced from source — no interface JSDoc yet; document on `Skeleton.tsx`.

radius

"sm" | "md" | "lg" | "full"

Optional

—

Synced from source — no interface JSDoc yet; document on `Skeleton.tsx`.

count

number

Optional

1

Synced from source — no interface JSDoc yet; document on `Skeleton.tsx`.

Quick use:<Skeleton />

Accessibility

ARIA rolestatus

Usage

Import

tsxSnippet

import { Skeleton } from "@epasslive/design-system"

Example 1

tsxSnippet

<Skeleton />

Example 2

tsxSnippet

<Skeleton variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms