Skeleton

Loading placeholder that mirrors content shape.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import { Skeleton } from "@aspyn-io/kit";

List item placeholder

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

Card placeholder

Mirror the real layout so content doesn't shift when data arrives.

<Card>
  <CardHeader>
    <Skeleton className="h-5 w-32" />
  </CardHeader>
  <CardContent className="space-y-2">
    <Skeleton className="h-4 w-full" />
    <Skeleton className="h-4 w-2/3" />
  </CardContent>
</Card>

Notes

Pairs naturally with React Suspense fallbacks and Next.js loading.tsx files.