Skeleton
Shimmering placeholder block for content that hasn't loaded yet.
Preview
Text line placeholders
<span class="nx-skeleton" style="display:block;height:12px;width:80%"></span> <span class="nx-skeleton" style="display:block;height:12px;width:55%"></span><NxSkeleton height={12} width="80%" />
<NxSkeleton height={12} width="55%" />API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
width | number|string | "100%" | CSS width. | |
height | number|string | 14 | CSS height. | |
radius | number | 8 | Border radius. |
Classes
| Class | Description |
|---|---|
.nx-skeleton | Surface-2 bg, shimmer sweep, reduced-motion aware |
Accessibility
- Rendered aria-hidden (NxSkeleton sets it) — pair with a visually-hidden text announcement elsewhere (e.g. a table caption) if the loading state itself needs to be announced.
Do / Don’t
- Do: Match the skeleton's shape to the real content it replaces.Don’t: Don't leave skeletons on screen past the real load — always swap to content or an empty state.