Skeleton

Skeleton paints neutral placeholder blocks while real content is still fetching. Size free-form rows with explicit width and height (or let flex stretch them); avatar circles use radius="full" on square dimensions.

When the final layout already exists in markup, wrap that node in Skeleton.Overlay. The overlay measures the child and paints a pulse mask on top, so placeholders stay aligned when copy wraps or media aspect ratios differ. Theme radius rounds corners like other surfaces.

Mark the hosting region aria-busy (and an accessible name when a whole card loads) so assistive tech knows content is provisional — Skeleton roots stay decorative. The pulse respects prefers-reduced-motion; set animate={false} when a static block reads better. For an Overlay reveal wipe, put view-transition-name: skeleton-overlay on a CSS class wrapping the skeleton and loaded content.

AnatomyCopy Anchor Link

Import the component and assemble its parts:

import { Skeleton } from '@viraui/react';

<Skeleton />

<Skeleton.Overlay />

When to useCopy Anchor Link

• Content structure is known and you want layout to stay stable while data loads
• Card, list, or profile chrome that should not collapse into a blank hole
• Real Title / Text / media already in the tree and the pulse should match their box (Skeleton.Overlay)

When not to useCopy Anchor Link

• A short opaque wait with no layout to reserve → Spinner
• A task with known or indeterminate percent along a track → LinearProgress
• Loading should give hint about the current loading status → Shimmer on Text / Title

RelatedCopy Anchor Link

• Spinner — compact busy indicator for short waits
• LinearProgress — determinate or indeterminate track progress
• Shimmer — loading treatment on live text, not layout blocks

Common examplesCopy Anchor Link

Avatar and text linesCopy Anchor Link

A profile header before data resolves: circular avatar beside two text lines inside a bordered card. The Surface carries aria-busy and an accessible name; Skeleton roots stay decorative.

Overlay on real contentCopy Anchor Link

Wrap the real Title and Text the card will show. Skeleton.Overlay sizes the pulse to those children so the loaded layout does not jump.

Overlay reveal wipeCopy Anchor Link

When the fetch completes, swap Overlay cards for the real tree inside a View Transition. Put view-transition-name: skeleton-overlay on a CSS class that wraps both states — Skeleton paints the wipe from that name. Click Show content in the preview to run it.

Equal-width actionsCopy Anchor Link

Stack expandChildren on a row of Skeletons so action placeholders share width like a dual Button footer — no flex CSS.

Ask your agentCopy Anchor Link

Show a loading profile row: circular avatar placeholder beside two text lines, inside a bordered card. Mark the region as loading for screen readers.