# Skeleton

A shimmering placeholder shown while content loads.

Source: [skeleton.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/skeleton.tsx)

```tsx
import { Skeleton } from "@/components/ui/skeleton";

export default function SkeletonList() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      {[0, 1, 2].map((i) => (
        <div key={i} className="flex items-center gap-3">
          <Skeleton className="size-8 shrink-0 rounded-full" />
          <div className="flex flex-1 flex-col gap-2">
            <Skeleton className="h-3.5 w-2/5" />
            <Skeleton className="h-3 w-3/5" />
          </div>
        </div>
      ))}
    </div>
  );
}
```

## Installation

Add the registry, once per project:

```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```

Then add the component:

```bash
npx shadcn@latest add @jarvis/skeleton
```

## Usage

```tsx
import { Skeleton } from "@/components/ui/skeleton";

export function ProfileSkeleton() {
  return (
    <div className="flex items-center gap-3">
      <Skeleton className="size-8 rounded-full" />
      <div className="flex flex-1 flex-col gap-2">
        <Skeleton className="h-3.5 w-2/5" />
        <Skeleton className="h-3 w-3/5" />
      </div>
    </div>
  );
}
```

Size each skeleton to match the content it stands in for, so nothing shifts when it loads.

Skeletons are hidden from screen readers. Set `aria-busy` on the loading region, or add visually
hidden text such as "Loading projects".

## Examples

### Card

```tsx
import { Skeleton } from "@/components/ui/skeleton";

export default function SkeletonCard() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3 rounded-lg bg-card p-4 shadow-raised">
      <Skeleton className="aspect-[8/3] w-full rounded-md" />
      <Skeleton className="h-4 w-1/2" />
      <Skeleton className="h-3 w-4/5" />
      <div className="flex gap-2 pt-1">
        <Skeleton className="h-6 w-20 rounded-md" />
        <Skeleton className="h-6 w-16 rounded-md" />
      </div>
    </div>
  );
}
```

### Table rows

```tsx
import { Skeleton } from "@/components/ui/skeleton";

export default function SkeletonTable() {
  return (
    <div className="flex w-full flex-col">
      {[0, 1, 2, 3].map((i) => (
        <div
          key={i}
          className="flex h-12 items-center gap-4 border-b border-border-muted last:border-b-0"
        >
          <Skeleton className="h-3.5 w-20" />
          <Skeleton className="h-3.5 flex-1" />
          <Skeleton className="h-3.5 w-16" />
          <Skeleton className="h-3.5 w-14" />
        </div>
      ))}
    </div>
  );
}
```

## Props

| Part | Extends |
| --- | --- |
| `Skeleton` | `<div>` |