# Skeleton
> Generated from skeleton.contract.json — do not edit by hand.

A greyed placeholder that holds a component's shape while its content loads.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `variant` | text | paragraph | title | avatar | button | input | image | `text` | Placeholder shape |
| `rows` | number | `3` | Paragraph line count (last row is shorter); paragraph variant only |
| `round` | boolean | `false` | Soften button/input/image corners to the pill |
| `active` | boolean | `true` | Animate the shimmer (set 'false' to freeze) |

## Visual standard (measured)
- Fill: #F1F1F1 · radius xs (4)
- Text: height 16 · full width
- Paragraph: N rows (12 gap); last row 60% width
- Title: height 24 · 38% width
- Avatar: 40×40 · radius pill
- Button / Input: height 32 / 36 · radius default (8)
- Image: height 96 · centred gray-50 image glyph · radius default
- Round: corner-bearing variants soften to the pill
- Motion: opacity pulse 1.6s (respects reduced-motion); active=false stops it

## When to use
- **Skeleton** — content is loading and you want to hold its exact layout to avoid a jump
- **Spin** — a short, indeterminate wait where the final shape is unknown
- **Progress** — you can measure completion (a percentage)

Match the skeleton to the real content's shape and size so nothing shifts when it resolves. Use it for the first load of a region; don't stack many pulsing blocks for a sub-second wait — a Spin is calmer.