Skeleton
@sushindustries/uiThe wait, drawn as the thing being waited for: a line, a block or a circle, shimmering unless motion is reduced.
Skeleton draws the wait as the shape of the thing being waited for: a line of text, a block of media, a circle of an avatar. Reach for it anywhere content has not arrived yet and a placeholder should stand in its shape until it does.
tanstacktanstack add https://adamjurek.com/r/tanstack/skeleton.json
shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/skeleton.jsonWhy it is built this way
The three shapes cover every loading state this site has actually needed, so there is no fourth. Reduced motion is handled by removing the shimmer outright rather than swapping it for something gentler - a static placeholder still says "coming", and says it calmly, for someone who asked for less motion rather than none.
Install
tanstack add https://adamjurek.com/r/tanstack/skeleton.jsonshell
pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/skeleton.jsonshell
pnpm add @sushindustries/ui @sushindustries/atomsshell
What you get
| Version | 0.1.0 |
| Category | content · Loading |
| Files | skeleton.tsx |
| Dependencies | None |
| Tags | loading, no-deps |
No runtime dependencies
It brings nothing with it beyond the stylesheet.