ElyriSkeleton
Loading placeholders in text, rect and circle shapes, with shimmer and pulse animations that adapt to light and dark themes.
Installation
Add component
pnpm dlx @elyri/cli@latest add skeletonExamples
Basic
The default text shape; lines sets the line count and the last line is shortened.
import { Skeleton } from './components/elyri/Skeleton';
export function Example() {
return <Skeleton lines={3} />;
}Shapes
Three shapes: text / rect / circle. A circle needs only one size.
import { Skeleton } from './components/elyri/Skeleton';
export function Example() {
return (
<div className="demo-ui-row">
<Skeleton shape="circle" width={48} />
<Skeleton shape="rect" width={120} height={72} />
<Skeleton width={160} />
</div>
);
}Composition
Mirror the real layout, then switch back with loading={false}.
import { Skeleton } from './components/elyri/Skeleton';
export function Example() {
return (
<div aria-busy="true" style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 360 }}>
<Skeleton shape="rect" height={160} />
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<Skeleton shape="circle" width={40} />
<div style={{ display: 'flex', flex: 1, flexDirection: 'column', gap: 8 }}>
<Skeleton width="45%" height={14} />
<Skeleton width="30%" height={10} />
</div>
</div>
<Skeleton lines={3} height={10} />
</div>
);
}Animations
Three animations: shimmer / pulse / none. Falls back to a slow pulse under reduced motion.
import { Skeleton } from './components/elyri/Skeleton';
export function Example() {
return (
<div className="demo-ui-stack">
<Skeleton animation="shimmer" height={12} />
<Skeleton animation="pulse" height={12} />
<Skeleton animation="none" height={12} />
</div>
);
}Wrapping children
With children, the skeleton takes their size while hiding them.
import { Avatar } from './components/elyri/Avatar';
import { Skeleton } from './components/elyri/Skeleton';
export function Example({ loading }: { loading: boolean }) {
return (
<Skeleton shape="circle" loading={loading}>
<Avatar name="Ada Lovelace" size="lg" />
</Skeleton>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
shape | 'text' | 'rect' | 'circle' | 'text' | Shape: text / rect / circle |
width | number | string | — | Width; numbers are treated as px |
height | number | string | — | Height; numbers are treated as px |
lines | number | 1 | Number of text lines, text shape only |
animation | 'shimmer' | 'pulse' | 'none' | 'shimmer' | Animation: shimmer / pulse / none |
loading | boolean | true | Render children directly when false |
children | ReactNode | — | Loaded content; sizes the skeleton while loading |
...rest | HTMLAttributes | — | Remaining props are forwarded to the native div; the skeleton is aria-hidden, so set aria-busy on its container |