nalarx-uiComponents
Skeleton
Shimmering placeholder shapes sized like the content they stand in for.
bunx shadcn@latest add @nalarx/skeletonUsage
Match the final size, so nothing shifts when the data arrives. Never show a bare "Loading…" text instead.
<Skeleton width={120} height={14} />
<SkeletonText lines={3} />Card and row
Props
| Export | Props |
|---|---|
Skeleton | width ("100%"), height (14), radius (6), ariaLabel, className. Numbers are px. |
SkeletonText | lines (3), lineHeight (12), gap (8), lastLineWidth ("60%") |
SkeletonCard | titleWidth, subtitleWidth, bodyLines, showAction |
SkeletonRow | height (48), showAvatar |
Accessibility
Each Skeleton is a status with aria-busy and the loading string as its name. Inside a control that already names the wait, hide them with aria-hidden. The shimmer stops under reduced motion.
Replaces
Skeleton.tsx in both apps.