Recipe

Skeleton Loader Patterns

Prevent layout shift and reduce perceived latency with shimmer placeholders that mirror your content structure.

Card Grid Skeleton

A responsive grid of card-shaped placeholders with staggered shimmer animation.

List Row Skeleton

Horizontal rows with avatar + text blocks for feeds, tables, and activity streams.

Detail Page Skeleton

Full-page placeholder with hero image, title, and multi-paragraph body blocks.

Tailwind Recipe

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

← All Recipes