Skeleton

Skeleton is a placeholder sketch of upcoming content that makes loading feel shorter.

Skeleton wraps SkeletonItems and sets aria-busy. Arrange SkeletonItems (rectangle / circle / square, 8 → 128px tall) to match the layout of the real content. The wave or pulse animation turns off when people enable reduced motion.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { Skeleton, SkeletonItem } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Pulse

Fades the opacity in and out instead of a moving highlight.

Shape

circle, square, rectangle.

Translucent

Semi-transparent, for surfaces that have a background color.

Usage

Match the real layout closely (a round avatar, a title line shorter than the body lines).
Set an aria-label on the Skeleton that describes what is loading.

Don't

Don't use Skeleton for user actions (save, send). Use Spinner.
Don't leave the Skeleton up forever when loading fails. Replace it with an error message.
Don't mix wave and pulse in the same area.

Props

Prop · Type	Default	Description
Skeleton.animation"wave" \| "pulse"	Default: "wave"	Animation for every child SkeletonItem.
Skeleton.appearance"opaque" \| "translucent"	Default: "opaque"	Solid or semi-transparent background.
SkeletonItem.shape"rectangle" \| "circle" \| "square"	Default: "rectangle"	Block shape.
SkeletonItem.size8 \| 12 \| 16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 48 \| 56 \| 64 \| 72 \| 96 \| 120 \| 128	Default: 16	Height (rectangle) or side length (circle / square), in px.
SkeletonItem.animation / appearance—	Default: —	Overrides the value set on the parent Skeleton.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.skeleton

Key · Type	Default (English)	messagesVi
labelstring aria-label của vùng đang tải (role="progressbar").	Default (English)`"Loading content"`	messagesVi`"Đang tải nội dung"`