Skeleton (Line / Card)

BetaRSC-safe

Squelette de chargement. SkeletonLine décorative (aria-hidden), SkeletonCard aria-busy ; le conteneur annonce le chargement. Animation shimmer CSS-only, désactivée sous prefers-reduced-motion. RSC-safe.

import { Skeleton } from "@lyra/tokens/components";

Playground

SkeletonLine — largeurs variables

SkeletonCard — 3 lignes (défaut)

SkeletonCard — 5 lignes

Démo interactive — réglages du playground (props ajustables en direct) à venir.

// Ligne unique
<SkeletonLine width="75%" />

// Bloc carte 3 lignes
<SkeletonCard lines={3} />

// Carte 5 lignes avec largeur fixe
<SkeletonCard lines={5} width="320px" />

// Sous un conteneur role="status" qui annonce déjà le chargement
<SkeletonCard decorative lines={3} />

Documentation

SkeletonLine 100%
SkeletonLine 60%
SkeletonCard 3L

width, height, lines, aria-label, decorative

// Ligne unique
<SkeletonLine width="75%" />

// Bloc carte 3 lignes
<SkeletonCard lines={3} />

// Carte 5 lignes avec largeur fixe
<SkeletonCard lines={5} width="320px" />

// Sous un conteneur role="status" qui annonce déjà le chargement
<SkeletonCard decorative lines={3} />