Skeleton
Animated placeholder that communicates loading state without layout shift. Use lines for text content, varying width per line for a natural paragraph feel. Use block for chart areas, images, or any tall region. All variants share the same shimmer animation so mixed usage stays in sync.
Examples
Loading examples…
API
From COMPONENTS.md.
Placeholder for content that's loading: one or more lines, or a block. Hidden from assistive technology (aria-hidden), so announce loading some other way.
import { Skeleton } from 'achery-ui'
<Skeleton lines={3} width={['100%', '90%', '60%']} />
<Skeleton block height="120px" />
<Skeleton width="32px" style={{ height: '32px', borderRadius: '50%' }} />
| Prop | Type | Default | Notes |
|---|---|---|---|
lines |
number |
1 |
Stacked with a small gap |
width |
string | string[] |
'100%' |
One width for every line, or one per line |
block |
boolean |
false |
A tall rectangle instead of lines |
height |
string |
— | Block height; ignored without block |
style |
CSSProperties |
— | Shape overrides |
className |
string |
— |