docs / core / skeleton

Skeleton

a grey block in the shape of a piece of content, shown while that content loads. hand these into the layout you are waiting on; to grey a whole component at once, reach for SkeletonMirror. wrap a composed placeholder in SkeletonGroup so one sheen crosses every block.

intensity · recedesrsc · server

provenance

authored in usva

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

hand-built blocks that mimic the loading card, list row or avatartext, circle and rect cover a line, an avatar and a media blockSkeletonGroup gives a composed placeholder one continuous border sheennot a spinner. a skeleton promises the shape of what is cominggreying a whole component you already have is SkeletonMirror

a11y

decorative, aria-hidden · own the loading announcement on the region around it · the sheen stops under reduced motionjest-axe

dependencies

class-variance-authority
blocks

props

proptypedefaultnotes
variant"text" | "circle" | "rect""text"the placeholder shape. text is a line, circle an avatar, rect a media block.
width / heightstring | number—explicit dimensions, applied via inline style.
radiusstring | number—border radius override, applied via inline style.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Skeleton, SkeletonGroup } from "@usva-ui/react/primitives/skeleton";

<SkeletonGroup className="flex flex-col gap-3">
  <Skeleton variant="circle" width={40} height={40} />
  <Skeleton variant="text" width="60%" />
  <Skeleton variant="rect" height={120} />
</SkeletonGroup>