Patterns

Loading states

Never show a blank flash. Match the shape, then stagger the reveal.

Skeleton primitive

tsx

<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
<Skeleton className="aspect-[4/3]" />

Template-shaped skeleton

Use the closest skeleton shape to the final layout so the reveal feels seamless.

tsx

<TemplateSkeleton />

Staggered reveal

Children fade up in a 60ms cascade. Refresh the preview to play it again.

Card 1

fades up after 0ms

Card 2

fades up after 60ms

Card 3

fades up after 120ms

Card 4

fades up after 180ms

Card 5

fades up after 240ms

Card 6

fades up after 300ms

tsx

<StaggerChildren className="grid grid-cols-3 gap-3">
  <Card>One</Card>
  <Card>Two</Card>
  <Card>Three</Card>
  <Card>Four</Card>
  <Card>Five</Card>
  <Card>Six</Card>
</StaggerChildren>