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.
Example
tsx
import { Skeleton } from '@kidcash/ui';
<Skeleton width={240} height={48} />
<Skeleton shape="circle" width={64} height={64} />
<Skeleton shape="text" count={3} />Try it live
← Back to the playground to see Skeleton rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.