Skeleton — single block
width · height · radius props
SkeletonText — paragraph lines
lines prop — auto-varied widths for natural feel
SkeletonCard — full card shape
header + body skeleton — matches Card component layout
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| width (Skeleton) | string | "100%" | CSS width. |
| height (Skeleton) | number | string | 16 | CSS height (px if number). |
| radius (Skeleton) | string | var(--radius-sm) | Border-radius override. |
| inline (Skeleton) | boolean | false | display: inline-block for use inside text. |
| lines (SkeletonText) | number | 3 | Number of skeleton lines to render. |
| gap (SkeletonText) | number | 8 | Gap between lines in px. |
| header (SkeletonCard) | boolean | true | Show lime-height header bar placeholder. |
| lines (SkeletonCard) | number | 3 | Body text lines. |
Usage
import { Skeleton, SkeletonText, SkeletonCard } from "components/feedback/Skeleton";
// Single block
<Skeleton height={24} width="60%" />
// Paragraph
<SkeletonText lines={4} />
// Full card
<SkeletonCard lines={3} />
// Conditional — show skeleton while loading
{isLoading ? <SkeletonCard /> : <Card header="Stats">…</Card>}