Recipe

Skeleton Loading Patterns

Prevent layout shift and improve perceived performance with animated placeholder shapes that mirror your content structure.

Card Grid Skeleton

List Row Skeleton

Profile Header Skeleton

Usage

<div className="animate-pulse space-y-4">
  <div className="h-4 bg-violet-500/10 rounded w-3/4" />
  <div className="h-4 bg-violet-500/10 rounded w-1/2" />
  <div className="h-32 bg-violet-500/10 rounded-lg" />
</div>

← Back to Docs