Skeleton
since v0.4.0Pulsing placeholder block — use while content is loading to prevent layout shift.
AT pattern:
• Default (<Skeleton />): role="status" + aria-label="Loading…".
Marks a polite live region; AT may announce the label when the
skeleton appears (exact behavior depends on browser + AT pairing).
• Custom label: <Skeleton aria-label="Loading scores" />.
• Decorative (no AT announcement): <Skeleton decorative />.
Forwards ref to the root <div>.
Install
Add the package and import the component.
pnpm add @hey-mike/tungstenpnpm add @hey-mike/tungstenimport { Skeleton } from '@hey-mike/tungsten';import { Skeleton } from '@hey-mike/tungsten';Preview
Same fixtures used by the visual-regression suite.
Usage
apps/docs/app/snapshots/skeleton/page.tsx
import { Skeleton } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';
export default function SkeletonSnapshot() {
return (
<VariantGrid
title="Skeleton"
variants={[
{ label: 'short', node: <Skeleton className="w-24 h-4" /> },
{ label: 'wide', node: <Skeleton className="w-64 h-4" /> },
{ label: 'block', node: <Skeleton className="w-48 h-24" /> },
]}
/>
);
}
import { Skeleton } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';
export default function SkeletonSnapshot() {
return (
<VariantGrid
title="Skeleton"
variants={[
{ label: 'short', node: <Skeleton className="w-24 h-4" /> },
{ label: 'wide', node: <Skeleton className="w-64 h-4" /> },
{ label: 'block', node: <Skeleton className="w-48 h-24" /> },
]}
/>
);
}
Props
Surface specific to <Skeleton />.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | — |
| width | string | number | — | — |
| height | string | number | — | — |
| decorative | boolean | — | Render with role="presentation" and no aria-label. Use inside an already-announced container. |
| aria-label | string | — | Override the default "Loading…" announcement. Pass "" to opt out (prefer decorative for clarity). |