Skeleton
components/Skeleton.tsx
shape
Shapes
text (radius 4) / rect (radius 10) / circle (50%)
shape="text" (default) — h=16
shape="rect" — h=80
shape="circle" — w=48, h=48
sizes
Custom widths and heights
width / height accept number (px) or string (%)
width="100%" h=16
width="60%" h=16
width="40%" h=16
real-world
Real-world usage
Composite placeholder — user card skeleton during loading
real-world
Table skeleton
Row-by-row skeleton for a data table