skeleton
Use to show a placeholder while content is loading.
Philosophy
Loading states deserve the same design attention as loaded states. Skeleton placeholders reduce perceived wait time by hinting at the shape of incoming content. We keep this component prop-less intentionally - you control the shape through className and layout, mirroring the actual content it replaces.
For icon-only UIs, keep a compact icon-sized skeleton instead of removing the skeleton entirely, so layout stability is preserved while loading.
Installation
npx @gentleduck/cli add skeleton
npx @gentleduck/cli add skeleton
Usage
import { Skeleton } from "@/components/ui/skeleton"
<Skeleton className="w-[100px] h-[20px] rounded-full" />
Examples
Card
RTL Support
Set the direction once with DirectionProvider (or <html dir="rtl">) and the skeleton follows it. No dir prop or rtl: classes needed.
Motion
Use MotionSkeleton for staggered entrance animations powered by motion. Each skeleton block uses a scaleIn entrance (fade, scale, and blur) with a bouncy spring transition, staggered by 50ms via the index prop.
motion package. Use MotionSkeleton instead of Skeleton. Same props plus index for stagger delay. The regular Skeleton is perfectly fine - this is an optional enhancement.API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
dir | 'ltr' | 'rtl' | - | Text direction override. Resolved via useDirection (dir prop -> DirectionProvider -> <html dir>). |
className | string | - | Additional CSS class names to control shape and size |
...props | React.HTMLProps<HTMLDivElement> | - | Additional props to spread to the content div |
MotionSkeleton
Staggered scaleIn entrance (fade, scale, and blur) with springBouncy transition. Requires the motion package.
| Prop | Type | Default | Description |
|---|---|---|---|
index | number | 0 | Stagger delay index (50ms per index) for entrance animation |
...props | SkeletonProps | - | All props from Skeleton are supported |