Skeleton

The Skeleton component is an accessible animated placeholder used to render loading states that simulate layout content while data is loading.

Preview

Import

import { Skeleton } from '@moul-dev/ui';

Shape Variants

Skeleton supports three shape variants: block (default), text, and circle:

// Rectangular block placeholder
<Skeleton variant="block" />

// Text line placeholder
<Skeleton variant="text" />

// Circular avatar / icon placeholder
<Skeleton variant="circle" />

Multi-item Count

Use the count prop to render multiple stacked skeleton items with automatic spacing:

<Skeleton variant="text" count={4} />

Props