SGDS Skeleton Component Skill

<sgds-skeleton> renders a placeholder shape to represent content that is still loading. Use it to reduce perceived loading time and prevent layout shift when data is being fetched.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Size the skeleton to match the real content it replaces — set width and height with CSS units (e.g., "200px", "100%", "1.5rem").

Shape?

• Rectangle (default) → omit borderRadius
• Rounded rectangle (card, button) → e.g., borderRadius="4px"
• Circle (avatar) → borderRadius="50%" with equal width and height