# Skeleton

A placeholder in the shape of content on its way, so nothing jumps when it arrives.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/skeleton
```

## Usage

```tsx
import { Skeleton } from '@/components/fetaui/skeleton'

export function Example() {
  return <Skeleton width="60%" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| shape | line, circle, block | line |
| width | number or string | 100% |
| height | number or string | 12, 36, 36 |
| shimmer | boolean | true |
| delay | number | 0 |
| animated | boolean | true |
| SkeletonShell title | ReactNode | required |
| SkeletonShell status | string | LOADING |
| SkeletonShell animated | boolean | true |
| SkeletonArrive index | number | 0 |

## When to use

- When the layout is known and loading takes longer than 300 ms.
- Shimmer on the main content, Static on secondary parts.
- Replace each piece as it arrives instead of waiting for everything.

## When not to use

- For what is already known: keep real headers, labels and actions.
- After 10 seconds: switch to an error or empty state.

## Accessibility

- Shapes are hidden from assistive tech.
- Skeleton Shell marks the region aria-busy.
- Announce when content is ready.

## Motion

- An 8% sheen sweeps left to right in 1.6 s. It pauses offscreen.
- Arriving content fades in with a 2 px blur over 240 ms, 40 ms per row.
- With reduced motion, the sheen becomes a slow 2 s pulse and content only fades.