‹ components

Skeleton

stablev1.0.0·open in canvas

Shimmering placeholder for content that is still loading — a block (`Skeleton`) and a labelled card-shaped region (`SectionSkeleton`).

Installnpx shadcn add @cids/skeleton
Live demo
Stats

Motion · tap to replay

honors reduced-motion

`animate-pulse` opacity shimmer only; collapses under `prefers-reduced-motion` via the global reset (no per-component code).

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Skeleton, SectionSkeleton } from "@/design-system";

<Skeleton className="h-4 w-2/3" />
<SectionSkeleton height={160} label="Stats" />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

Shimmering placeholder for content that is still loading — a block (Skeleton) and a labelled card-shaped region (SectionSkeleton).

Anatomy

┌ SectionSkeleton (rounded-card) ─┐
│ LABEL (uppercase, fg-muted)     │
│ ▬▬▬▬▬▬▬▬▬▬▬  ← Skeleton rows   │
│ ▬▬▬▬▬▬▬                        │
│ ▬▬▬▬▬▬▬▬▬                      │
└─────────────────────────────────┘

Props

PropTypeDefaultNotes
classNamestring—cn-merged; shape the block with w-*/h-*.
styleCSSProperties—Escape hatch for computed dimensions.
heightnumber—SectionSkeleton only — minHeight in px, matches the loaded card to prevent layout shift.
labelstring—SectionSkeleton only — section name; becomes the aria-label.

Motion

prefers-reduced-motion via the global reset (no per-component code).

A11y

so the loading region is announced once, not per row.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.