Shimmering loading placeholders: a rect, circle and text primitive. SkeletonCard, SkeletonList and SkeletonProfile ship in the same file.
npx shadcn@latest add https://hyperblur.dev/r/skeleton.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/skeleton.tsx.
import { Skeleton } from "@/components/hyperblur/skeleton"
<SkeletonCard />| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "rect" | "circle" | "text" | "rect" | Shape of the placeholder. |
| width | number | string | Width. Numbers are pixels. For circle it is the diameter. | |
| height | number | string | Height. Defaults to 96 for rect and 12 per line for text. | |
| lines | number | 1 | Number of lines for the text variant. |
| lastLineWidth | number | string | "62%" | Width of the final text line when there are several. |
| radius | number | string | 8 | Corner radius of rect and text blocks. |
| animate | boolean | true | Run the shimmer sweep. With reduced motion it pulses gently instead. |
| color | string | "#1d1d1d" | Base color of the blocks. |
| highlight | string | "rgba(255,255,255,0.075)" | Color of the shimmer band. |
| label | string | Makes the placeholder a labelled status region for screen readers. Composites default to Loading. | |
| SkeletonCard | { media?: boolean; mediaHeight?: number; lines?: number } | Composite props on top of animate, color, highlight and label. media toggles the image block, mediaHeight is in pixels and lines sets the text lines. | |
| SkeletonList | { rows?: number; avatarSize?: number } | Composite props on top of animate, color, highlight and label. Defaults are 3 rows and a 36 pixel avatar. |