## Skeleton
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.
Default to the HTML snippet — <aha-skeleton> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, audience.
Props:
- variant: text | paragraph | title | avatar | button | input | image, default text. Placeholder shape
- rows: number, default 3. Paragraph line count (last row is shorter); paragraph variant only
- round: boolean, default false. Soften button/input/image corners to the pill
- active: boolean, default true. Animate the shimmer (set 'false' to freeze)
Tokens: gray-30, gray-50, radius-xs, radius-default, radius-pill.
Use when: 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)).