Skeleton
skeletonReserves content geometry with an animated loading placeholder.
Usage
Shape
shape supports text / circle / rect, and the size is controlled by className.
<div className="flex items-center gap-4">
<Skeleton className="w-32" />
<Skeleton shape="circle" className="size-10" />
<Skeleton shape="rect" className="h-16 w-32" />
</div>Avatar + Text line
Combine circles and text blocks to simulate user information loading placeholders.
<div className="flex items-center gap-3">
<Skeleton shape="circle" className="size-10" />
<div className="flex-1 space-y-2">
<Skeleton className="w-24" />
<Skeleton className="w-40" />
</div>
</div>List Preset
ListSkeleton Configure multiple rows of list placeholders in one row.
<ListSkeleton rows={3} />Card Grid Presets
CardSkeleton Output card grid placeholder.
<CardSkeleton count={2} />When to use
Use Skeleton to reserve content-shaped space while data loads. Use ListSkeleton, CardSkeleton, or TableSkeleton to avoid rebuilding common layouts. Use Empty only after loading completes without data; pair table presets with Table or ProTable.
Import
import { Skeleton, TableSkeleton, CardSkeleton, ListSkeleton } from "@hulianui/ui"Props
Skeleton inherits native div attributes except style and provides a CVA shape variant:
| Name | Type | Default | Description |
|---|---|---|---|
| shape | "text" | "circle" | "rect" | "text" | Placeholder shape. |
ListSkeleton and CardSkeleton use rows and count, respectively; constrain preset dimensions with an outer className. All three presets accept an optional label override for the accessible loading message. Without one, they follow ConfigProvider and default to Chinese.
Pitfalls
- Presets intentionally omit chrome. Do not add an unnecessary Card wrapper that creates duplicate borders.
- Shimmer uses CSS rather than requestAnimationFrame, so headless screenshots show its shape without special handling.
- Presets expose a localized runtime loading label to assistive technology.
- Presets read the runtime locale from
ConfigProvider, so they are client components; server components can still import and render them.
Related
Empty · Watermark · Table · Book3D · ProTable · PricingTable
Playground
<Skeleton shape="text" />