Placeholders shown while content loads. Rectangle, square, circle and line in the Figma sizes.
A skeleton shows the shape of content while it loads, so the page does not jump when it arrives.
Mobile · 375px
Installation
npx shadcn@latest add @dga/skeletonUsage
import { Skeleton } from "@/components/ui/skeleton";
<div aria-busy="true" aria-live="polite">
<Skeleton shape="circle" size={48} />
<Skeleton shape="line" size="lg" />
</div>Layouts
The five Figma Skeleton Components, built from the primitive. Copy them as a starting point.
Mobile · 375px
Props
Prop
Type
Set widths with className (for example w-32).
Accessibility
- Skeletons are hidden from screen readers. Set
aria-busy="true"on the region that is loading, and remove it when the content arrives. - The pulse stops with reduced motion.
Contrast
No contrast pairs: this component is decorative. Content that carries meaning must not rely on it (WCAG 1.4.11 applies only to graphics needed to understand the content).
Deviations from DGA
| Item | DGA original | Ours | Reason |
|---|---|---|---|
| --skeleton-background (new) | No fill token on the Figma Skeleton components | --colors-neutral-200 (light), --colors-neutral-700 (dark) | Placeholder fill: neutral-200, neutral-700 in dark mode. |
| Skeleton: composite types | Five composite Skeleton Components (Image Button and Text, Icon and List, Image Content and Button, Chart and Content, Image Profile Content and Button) | One Skeleton primitive (rectangle, square, circle, line) and the five layouts as copy-paste examples on the docs page | The composites are layouts of the primitives; real pages need their own shapes. |
| Skeleton: animation | Static | Pulses (opacity); static with reduced motion | A gentle pulse shows that content is loading. prefers-reduced-motion turns it off. |