Feedback
Skeleton
A placeholder that hints where content will load. It draws text, circle, and box shapes with a soft shimmer.
ReactVueWeb Components
View in Storybook Playground
Examples
<Skeleton variant="circle" width={40} height={40} />
<Skeleton variant="rect" width="70%" height="1rem" />
<Skeleton lines={3} />Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | SkeletonVariant | text | Shape. @default 'text' |
width | number | string | — | CSS width (e.g. '60%', 200). |
height | number | string | — | CSS height (e.g. '1rem', 40). |
lines | number | — | Render N stacked text lines (text variant only). |
animated | boolean | true | Shimmer animation. @default true |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.