Skeleton

Animated loading placeholder that mimics content shape. Four shape variants, three animation modes, and a SkeletonCard preset.

import{ Skeleton, SkeletonCard } from "@pepulux/ui"

text is a short single line (h-4). circular is a fully-round blob. rectangular has no border-radius. rounded has 8px radius.

text

circular

rectangular

rounded

Pass lines to stack multiple text skeletons. The last line is automatically 75% width.

lines=1 (default)

lines=3

lines=5

pulse (default) opacity blink, wave shimmer sweep, none static placeholder.

animation=pulse (default)

animation=none (static)

Combine variants to match the real content layout you're loading.

Pre-built card with avatar, image, and three-line text — mirrors a typical content card.

Props

Prop	Type	Default	Description
variant	"text" \| "circular" \| "rectangular" \| "rounded"	"text"	Shape — text (h-4 line), circular (round blob), rectangular (no radius), rounded (8px radius)
width	string \| number	—	CSS width value or px number. Defaults to 100% for non-circular variants.
height	string \| number	—	CSS height value or px number. Defaults to 16px for text, 40px for circular, 120px for others.
lines	number	1	Stack multiple text lines. Last line is 75% width.
animation	"pulse" \| "wave" \| "none"	"pulse"	Loading animation style. wave requires custom CSS keyframes.
className	string	—	Additional CSS classes