Feedback
Skeleton
Animated placeholder shown while content loads. Text, circular and rectangular shapes with pulse or wave shimmer, announced to screen readers via role="status".
Import
import { Skeleton } from "@zephora/react";Examples
Shapes
<Skeleton variant="circular" width={48} height={48} />
<Skeleton variant="text" lines={3} />
<Skeleton variant="rectangular" width={240} height={120} />Card placeholder
Compose shapes to sketch the layout that is loading.
<div style={{ display: "flex", gap: 12 }}>
<Skeleton variant="circular" width={40} height={40} />
<div style={{ flex: 1 }}>
<Skeleton variant="text" lines={2} />
</div>
</div>Animations
pulse (default), wave, or none.
<Skeleton animation="pulse" width={220} />
<Skeleton animation="wave" width={220} />
<Skeleton animation="none" width={220} />API
Skeleton props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "text" | "circular" | "rectangular" | "text" | Placeholder shape. |
width | number | string | — | Explicit inline size (number = px). |
height | number | string | — | Explicit block size (number = px). |
lines | number | 1 | Number of text bars to render (text variant only; last bar is shorter). |
animation | "pulse" | "wave" | "none" | "pulse" | Loading shimmer style. |
label | ReactNode | "Loading…" | Screen-reader announcement. |
unstyled | boolean | false | Headless mode — skips Zephora styling. |