Skeleton
Headless loading placeholder that can wrap pending content.
Features
Headless placeholder
Radix-style loading behavior
Size props
Children-aware rendering
Accessible hidden loading state
Installation
npm install @ariaui/skeleton
Examples
Loading placeholders are headless: compose Skeleton.Root with Tailwind classes for shimmer, shape, and spacing. Wrap pending content when you want the placeholder to inherit the final layout, or use the size props for explicit placeholder dimensions.
Card
Card-shaped loading state with title rows and a media placeholder.
No preview output yet.
With Children
Wrap pending content so the loading placeholder keeps the final layout.
No preview output yet.
With Text
Wrap text content when the final copy should reserve its line rhythm.
No preview output yet.
Anatomy
import * as Skeleton from "@ariaui/skeleton";
export default function Example() {
return <Skeleton.Root />;
}
API Reference
Root
Headless loading placeholder. While `loading` is true it renders a hidden, inert placeholder host; when `loading` is false it renders children directly.
| Prop | Type | Default |
|---|---|---|
loading | boolean | true |
width | CSSProperties["width"] | — |
minWidth | CSSProperties["minWidth"] | — |
maxWidth | CSSProperties["maxWidth"] | — |
height | CSSProperties["height"] | — |
minHeight | CSSProperties["minHeight"] | — |
maxHeight | CSSProperties["maxHeight"] | — |
| Attribute | Values |
|---|---|
| aria-hidden | true while loading |
| inert | present while loading |
| data-state | 'loading' |
| data-inline-skeleton | present for text or non-element children |
Accessibility
Skeleton.Root renders loading placeholders with aria-hidden, inert, and tabIndex={-1} so pending placeholder content is not exposed as usable UI.
When loading={false}, the component returns its children directly. Make sure the final content has its own accessible name, role, labels, and keyboard behavior where appropriate.
Skeletons are visual loading affordances only. Do not use them for live announcements; pair long-running work with visible copy or a status region when users need progress updates.