# Skeleton

> The shape of what's coming, with one soft band of light sweeping across, and a swap that hands over to the real content without a pop.

Skeletons usually pulse out of step and then vanish in one frame when the content lands, so the page jumps. Here one band of light sweeps across the shapes, and SkeletonSwap fades them out as the content rises out of a 4px blur in their place while the box eases to the content's height.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/skeleton.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: none
- Hairline UI components it needs (the CLI installs them too): `ui-interaction-motion`
- Docs and live preview: https://hairlineui.com/ui/skeleton
- Registry item (source): https://hairlineui.com/r/skeleton.json

## Usage

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

<SkeletonSwap loading={!data} fallback={<><Skeleton shape="circle" /><Skeleton width="60%" /></>}>
  <Profile user={data} />
</SkeletonSwap>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shape` | `"line" \| "circle" \| "block"` | `"line"` | Skeleton shape. |
| `width / height` | `number \| string` | – | Size. |
| `SkeletonSwap` | `{ loading, fallback, children, label }` | – | Holds the fallback, then hands over. |

## States

- **waiting**: Muted shapes with a sweep (1.6s loop).
- **arriving**: Content rises 4px out of a 4px blur (300–420ms); height eases (360ms).

## What it handles

The worst part of a skeleton is the moment it is replaced; this one owns that moment.

- **One sweep**: A light band crosses each shape in 1.6s.
- **Hand-over**: SkeletonSwap crossfades to content through a blur (300ms).
- **No jump**: The box eases between the skeleton's height and the content's.
- **Shapes**: line, circle and block with any size.

## Replaces

loading placeholder, content shimmer, suspense fallback

## Where it fits

- **Dashboards**: Cards and charts while data loads.
- **Lists and tables**: Rows that keep their place.
- **Profiles**: An avatar and two lines of text.
- **Feeds**: Posts that arrive without shifting the page.

## Notes

- Skeleton shapes are aria-hidden; SkeletonSwap announces its label and sets aria-busy.
- Reduced motion: no sweep; the content fades in.

License: MIT (https://hairlineui.com/license#components)