Feedback/Skeleton

Skeleton

Animated placeholder loaders that match the shape of your content. Show while data is fetching to prevent layout shift and reduce perceived load time.

import { Skeleton } from "@animui/ui"

Basic

Card skeleton

Compose Skeleton elements to match your content's layout exactly.

Table rows

Conditional loading

Swap between the skeleton and real content based on your loading state.

Loaded

Jane Doe

Props

Prop	Type	Default	Description
`variant`	`"rect" \| "line" \| "circle" \| "card"`	`"rect"`	Preset shape variant. rect is a plain block; line renders multiple text lines; circle is round; card renders a full card skeleton.
`width`	`string \| number`	—	Width of the skeleton element (used with rect and circle variants).
`height`	`string \| number`	—	Height of the skeleton element (used with rect and circle variants).
`lines`	`number`	`3`	Number of text lines rendered when using the line variant.
`className`	`string`	—	Additional classes for custom sizing and shaping.