Components
Skeleton
A placeholder for content that is coming — not for content that is missing.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/skeleton.jsonComing, not missing
A skeleton promises that something will arrive. If the data may legitimately be empty, that is an empty state and it needs words — a skeleton that never resolves is the worst of both, because it looks like a bug that is still loading.
It pulses by default. A static grey block reads as a broken image rather than as a placeholder.
Match the shape you are replacing
SkeletonText makes the last line short, because that is what a paragraph looks
like. A stack of equal-length bars does not, and the eye notices.
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | "line" | "circle" | "block" | "line" | 12px line, 32px circle, or a 72px block. |
| width / height | number | string | — | Override for matching a specific slot. |
| lines | number | 3 | SkeletonText only. |