Skeleton
A pulsing placeholder shown while content is loading. Pair with explicit dimensions.
Profile row
Card
Paragraph
Installation
pnpm
pnpm dlx @hex-core/cli add skeletonAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Width/height and any additional styling via Tailwind classes |
AI Guidance
When to use
Use during async data loads to show the shape of forthcoming content. Match the dimensions and layout of the real content to avoid layout shift on load.
When not to use
Don't use for fast operations (<200ms — users prefer a brief spinner or nothing). Don't use as a permanent empty state (use proper empty-state UI).
Common mistakes
- Skeleton dimensions don't match loaded content — causes layout shift
- Leaving Skeleton visible for long loads without a timeout/retry
- Using Skeleton for interactive elements users might tap
Accessibility
Add aria-busy='true' on the loading container and a visually hidden status (aria-live='polite') to announce load completion to screen readers.
Token budget: 200