Skeleton

Loading placeholder with shimmer animation. Style it via className for any shape.

Examples

Compose any layout

<div className="flex items-center gap-3">
  <Skeleton className="w-10 h-10 rounded-full" />
  <div className="flex-1 space-y-2">
    <Skeleton className="h-4 w-3/4" />
    <Skeleton className="h-3 w-1/2" />
  </div>
</div>
<Skeleton className="h-32 w-full rounded-lg" />

API Reference

Props of the Skeleton component.

Prop	Type	Default	Description
`className`	`string`	—	Tailwind classes for sizing and shape.