Skeleton

A decorative placeholder with closed shape and size guidance.

When to use it. Use it inside a separately labelled caller-owned loading region.

Native baseline Exact fallback

Skeleton primary example

<section aria-busy="true" aria-label="Loading profile"><.skeleton shape={:circle} /></section>

<.skeleton> The caller's native elements, names, and document relationships remain authoritative.
package CSS Package CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract.
gallery only Theme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :skeleton does not ship them.
application boundary ShadcnUI does not add application state, authorization, persistence, transport events, or a JavaScript behavior layer to this component.

Examples use package semantic tokens in explicit light and dark scopes.

Skeleton is always aria-hidden; label the meaningful region outside it.

Skeleton support and fallback
Feature	Locked-engine evidence	When missing
Native baseline	Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix.	Reduced motion removes pulse while preserving geometry.
Exact fallback	The locked-engine matrix retains the documented native or static outcome.	Reduced motion removes pulse while preserving geometry.

The application owns loading detection, announcements, errors, replacement, and layout.

Catalogue identity foundation.skeleton, adapted from unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63 under its MIT notice.

The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.

Adapt skeleton presentation into a decorative HEEX placeholder with a reduced-motion-safe snapshot.