Display
Skeleton
A pulsing block that holds a place while content loads. Size it like what is coming.
packages/design-system/components/ui/skeleton.tsx
Examples
Anatomy
- 01Block, bg-muted, rounded-2xl, animate-pulse
Usage
import { Skeleton } from "@repo/design-system/components/ui/skeleton";
<Skeleton className="aspect-video w-full" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Match the shape and size of the real content, so nothing jumps.
Don't
- Show it for loads under 300ms.