Foundations · stable · MIT

Skeleton

A decorative loading placeholder with reduced-motion fallback.

Install editable source

Add Skeleton

Base UI / canonicalnpx shadcn@latest add https://gummyui.dev/r/gummy-skeleton.json

No package dependency beyond React. Shared Gummy material is resolved automatically.

Behavior contract

Hidden from assistive technology; real loading state belongs on the region.

No component-specific keys.

Light and dark themes, logical RTL layout, reduced motion, responsive content, and forwarded public refs.

Source-derived reference

These public React parts are read directly from the canonical source during the documentation build.

Composes React.HTMLAttributes<HTMLDivElement> & { label?: string; }

Composes React.HTMLAttributes<HTMLDivElement> & { shape?: "line" | "text" | "circle" | "card"; loadingLabel?: string; lines?: number; }

Troubleshooting

If the material is missing, confirm the registry-installed shared and component CSS files are imported once.
If interaction differs, preserve this contract: No component-specific keys.
If assistive output differs, preserve this semantic foundation: Hidden from assistive technology; real loading state belongs on the region.
If dark, RTL, or reduced-motion behavior is missing, verify the nearest theme, direction, and media-query boundaries rather than adding page-local overrides.

Live product source

The Component Lab exercises real source across default, focus, disabled, responsive, dark, reduced-motion, and RTL contexts.

Interactive inspection

Resize the canvas, switch its theme, or reverse its reading direction without changing the rest of the page.

Editable source

Loading editable source…