Foundations
Skeleton
Three shapes (rect, circle, text). Subtle glass background plus a moving shimmer overlay that uses the active theme's shimmer color so it reads in light AND dark modes.
Skeleton is the loading placeholder. Three shapes — rect (rounded-card, the default), circle (avatar swap), text (one or more bars; the last bar is shorter for a "ragged paragraph" tell).
The shimmer overlay reads from --theme-shimmer-color so it's a soft white wash on dark themes and a soft dark wash on light themes — no more invisible animation when the user lands on mint-breeze or cotton-cloud.
Live preview
Example
tsx
import { Skeleton } from '@kidcash/ui';
<Skeleton width={240} height={48} />
<Skeleton shape="circle" width={64} height={64} />
<Skeleton shape="text" count={3} />Want all 27 in one place?
The home playground shows every component side-by-side. Or install @kidcash/ui and use Skeleton in your own app.