components
Skeleton
A content-shaped loading placeholder. A subtle highlight sweeps across a muted base every 1.5 seconds. Stack a few to mirror the shape of the content that is loading.
Variants
Text for lines of copy, rect for images and blocks, circle for avatars.
text
rect
circle
Multi-line text
Pass lines to render a paragraph. The last line is shorter, the way real text wraps.
Story card loading
Compose primitives to match the real layout: a rect for the illustration, then lines for the title and body.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "text" | "rect" | "circle" | text | The shape of the placeholder. |
| width | string | number | none | Number is treated as px. Defaults to full width for text and rect. |
| height | string | number | none | Number is treated as px. Text lines default to 1em. |
| lines | number | 1 | Text only. Renders a stack of lines with a shorter last line. |
| radius | string | number | none | Radius token name (sm, md, full) or any CSS length. Sensible per variant. |