Skeleton
Stripe Spinner (instead of)Instead of a spinner, the page keeps its shape while it loads. Skeleton is a block with a light band sweeping across it; SkeletonText is exactly as tall as the line of text it stands in for, so it can sit inside a heading. Wrap the swap in Reveal and the content fades and rises 4px when it replaces the skeleton. Plain CSS, no animation runtime.
Loading, then content
When to use
- Any loading state — the kit also ships whole-page shapes (DetailSkeleton, PageSkeleton, TableSkeleton…).
Not for
- A busy button — use ShimmeringText.
Props
Skeleton / SkeletonText
| Prop | Type | Description |
|---|---|---|
| shimmer | boolean Default true | The sweeping band; false pulses instead. |
| className | string | Give it a size: h-12 w-24, or a width for SkeletonText. |
Reveal
| Prop | Type | Description |
|---|---|---|
| loading | boolean | While true, render the skeleton; content that replaces it animates in. |
| as | "div" | "span" | "section" Default "div" | span inside text. |
| className | string | Extra classes on the outer element. |