Skeleton
Shape-preserving placeholders that reduce layout shift while content loads.
Examples
Content placeholder
Overview
Combine block, text, and circle variants to approximate the final content structure.
tsx
import { Skeleton } from "@standard-ui/react" <Skeleton variant="text" className="w-48" />
API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "block" | "text" | "circle" | block | Placeholder shape. |
Guidelines
Do
- Match the dimensions of expected content
Don't
- Don't use skeletons for immediate actions