Skeleton
Placeholder blocks that mimic the shape of incoming content. Supports an active shimmer animation to signal loading state.
Active shimmer
Add active to animate a gradient that sweeps left to right.
Without animation
Default skeleton without the active prop. Renders static grey blocks.
Paragraph rows
Control the number of paragraph lines and their widths.
Round style
All placeholder bars get pill-shaped corners.
Title only / Paragraph only
Independently toggle title and paragraph sections.
Avatar sizes and shapes
Skeleton.Avatar is a standalone circle or square placeholder.
Button placeholders
Skeleton.Button mimics a loading button element.
Input placeholder
Skeleton.Input mimics a loading text field.
Image placeholder
Skeleton.Image is a square block with a faded image icon.
Composing a card skeleton
Combine sub-components to build a custom content skeleton.
Skeleton API
| Property | Type | Default | Description |
|---|---|---|---|
loading | boolean | true | When false, renders children instead of the skeleton |
active | boolean | false | Show the moving shimmer animation |
avatar | boolean | { size?: SkeletonSize; shape?: SkeletonAvatarShape } | false | Show an avatar placeholder on the left |
title | boolean | { width?: string | number } | true | Show a title line |
paragraph | boolean | { rows?: number; width?: string | number | Array<...> } | true | Show paragraph lines (default 3 rows) |
round | boolean | false | Use pill / rounded corners on all elements |
Skeleton.Button API
| Property | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Size of the button placeholder |
active | boolean | false | Show shimmer animation |
round | boolean | false | Pill-shaped corners |
block | boolean | false | Full-width block element |
Skeleton.Avatar API
| Property | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Size of the avatar circle |
shape | "circle" | "square" | "circle" | Shape of the avatar placeholder |
active | boolean | false | Show shimmer animation |
Skeleton.Input API
| Property | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Height of the input placeholder |
active | boolean | false | Show shimmer animation |
block | boolean | false | Full-width block element |
