Skeleton
A stand-in for something still loading: a quiet grey shape with a faint band of light dragged along the slant across it.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/skeletonExamples
A card still loading
import { Skeleton, SkeletonText } from "@/components/zero/skeleton";export default function SkeletonCard() { return ( <div className="grid w-full max-w-md grid-cols-[5rem_1fr] gap-4"> <Skeleton className="size-20" /> <div className="grid content-start gap-4"> <SkeletonText lines={2} /> <Skeleton shape="slab" /> </div> </div> );}Behaviour
Three shapes: a block for pictures and cards, a line for a line of text, cut on both sides like a slab, and a slab the size of a control. Size each like the thing it stands for; SkeletonText stacks lines, the last one short.
Skeletons are hidden from assistive technology; mark the region that is loading with aria-busy. Under reduced motion the light does not move.
Props
Skeleton
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | "block" | "line" | "slab" | "block" | A rectangle, a thin slanted line of text, or a control-sized slab. |
SkeletonText
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | number | 3 | How many lines. |