Search for a command to run...
A neutral placeholder block that pulses while content loads. `bg-sand-9/12` reads as ambient on both light and dark surfaces; size with width/height utilities to match the shape of the real content.
Skeleton is one div with animate-pulse + a translucent fill. Drive shape with className — width, height, rounded corners.
Skeleton| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Required for sizing. Match the shape of the real content (h-4 w-40 for a line of text, size-12 rounded-full for an avatar, h-9 rounded-3xl for a button). |
Match the shape of what's loading — avatar circles, button pills, text lines. The user perceives "this is loading" instantly when the silhouette is right.
Render skeletons in the same layout slot the real content will occupy. No reflow when the data arrives — the placeholder swaps for the value in place.
Use skeletons for sub-100ms loads. The pulse animation finishes a single cycle in ~1s — anything faster shows up as a flash and reads as a glitch.
Stack a Spinner next to a Skeleton. Pick one signal — the skeleton itself communicates "this
block is loading."