Skeleton
displayShimmer animation placeholder for loading states. Composable with text, circle, and rectangle variants.
import { Skeleton } from '@/components/forge'Preview
Skeleton
Code Example
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | 'text' | 'circle' | 'rectangle' | 'rectangle' | No | Shape of the skeleton |
width | string | number | - | No | Width (string like "75%" or number in px) |
height | number | - | No | Height in px |
size | number | - | No | Both width and height for circle variant |
Variants
textcirclerectangle
Accessibility
- Skeleton container has aria-busy="true" and aria-label="Loading"
- Shimmer animation pauses if prefers-reduced-motion is set