# Skeleton

> Loading placeholder that mirrors content shape.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/skeleton.json`

## Install

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

### List item placeholder

```tsx
<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.

```tsx
<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>
```

### Table skeleton

Placeholder rows while table data loads; match the real column widths.

```tsx
<div className="space-y-3">
  {rows.map((row) => (
    <div key={row} className="flex items-center gap-4">
      <Skeleton className="h-4 w-1/3" />
      <Skeleton className="h-4 w-1/4" />
      <Skeleton className="h-4 w-1/5" />
      <Skeleton className="ml-auto h-4 w-16" />
    </div>
  ))}
</div>
```

### Form skeleton

Label and field placeholders that mirror a real form.

```tsx
<div className="space-y-4">
  <div className="space-y-2">
    <Skeleton className="h-4 w-24" />
    <Skeleton className="h-9 w-full" />
  </div>
  <div className="space-y-2">
    <Skeleton className="h-4 w-32" />
    <Skeleton className="h-9 w-full" />
  </div>
  <Skeleton className="h-9 w-28" />
</div>
```

## Notes

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