Primitives
Skeleton
The core building block. Every other component composes from this.
Examples
Rectangle
TSX
import { Skeleton } from "@gyojiro/autoskeleton-react"; <div className="space-y-2"> <Skeleton width="100%" height={16} /> <Skeleton width="80%" height={16} /> <Skeleton width="60%" height={16} /> </div>
Variants
default
rounded
circle 48
circle 64
TSX
import { Skeleton } from "@gyojiro/autoskeleton-react"; <div className="flex flex-wrap gap-4 items-center"> <Skeleton width={80} height={36} /> <Skeleton width={80} height={36} variant="rounded" /> <Skeleton variant="circle" size={48} /> <Skeleton variant="circle" size={64} /> </div>
Animations
wave
pulse
fade
none
TSX
import { Skeleton } from "@gyojiro/autoskeleton-react"; {(["wave", "pulse", "fade", "none"] as const).map((anim) => ( <Skeleton key={anim} width="100%" height={36} animation={anim} /> ))}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| width | number | string | "100%" | Width of the skeleton. |
| height | number | string | 16 | Height of the skeleton. |
| size | number | string | — | Diameter when variant="circle". Ignored for every other variant — use width/height there. |
| radius | SkeletonRadius | theme.radius | "none" | "sm" | "md" | "lg" | "full" | string |
| animation | SkeletonAnimation | theme.animation | "wave" | "pulse" | "fade" | "none" |
| variant | SkeletonVariant | "default" | "default" | "rounded" | "circle" |
| className | string | — | Additional CSS class names. |
| style | CSSProperties | — | Inline style overrides. |
| aria-label | string | — | When set, the skeleton is announced by screen readers. |
| data-testid | string | — | HTML test attribute. |