docs / core / skeleton-group

SkeletonGroup

one light passing over the whole block. each Skeleton is measured against the group, so the shimmer crosses them in the order they sit in rather than restarting inside every one.

intensity · recedesrsc · client

provenance

shaped from sisu-plus

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

any cluster of Skeletons that stands for one thing: a card, a row, a profilewrap the layout you already have. the group takes your flex or grid classesnot around a whole page of unrelated blocks. the sweep then means nothinga single Skeleton needs no group. it already shimmers on its own

a11y

the group adds no semantics of its own · the shimmer is decorative and stops under reduced motionjest-axe

dependencies

Skeleton from the same package
live demo · try it out
customize
groupedone sweep across all of them
usagecopy
import { Skeleton, SkeletonGroup } from "@usva-ui/react/primitives/skeleton";

<SkeletonGroup>
  <Skeleton className="h-10 w-10 rounded-full" />
  <Skeleton className="h-4 w-40" />
  <Skeleton className="h-4 w-24" />
</SkeletonGroup>

props

proptypedefaultnotes
childrenReactNode—any markup. every Skeleton beneath it joins the sweep, at any depth.
classNamestring—the group is a plain div, so it carries your layout: flex, grid, whatever the real content uses.

get it

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

<SkeletonGroup className="flex items-start gap-4">
  <Skeleton className="size-12 rounded-full" />
  <Skeleton className="h-4 w-2/3" />
</SkeletonGroup>