Back to componentszyra-skeleton
Skeleton
Shimmer loading placeholders with 20+ preset layout variants — from simple text lines and shapes to full dashboard, product, calendar, and chat skeletons.
API
All inputs and configuration options for zyra-skeleton.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'text' | 'circle' | 'rect' | 'rounded' | 'avatar' | 'image' | 'button' | 'input' | 'card' | 'list' | 'article' | 'table' | 'chat' | 'dashboard' | 'video' | 'chart' | 'product' | 'profile' | 'calendar' | 'rect' | Skeleton shape or preset layout |
lines | number | 3 | Number of text lines (text and article variants) |
rows | number | 5 | Number of repeated rows (list and table variants) |
width | string | '' | CSS width override (e.g. "120px", "60%") |
height | string | '' | CSS height override |
animated | boolean | true | Enable/disable the shimmer animation |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Skeleton is purely decorative — wrap in an aria-busy="true" container while loading
- Remove skeletons and announce content arrival with aria-live="polite"