Skeleton

Renders an animated placeholder block to indicate that content is loading. When visible is false, the skeleton hides and children render normally. Supports circle shape, custom dimensions, and custom radius.

Text skeletons

<Stack gap="sm">
  <Skeleton height={14} />
  <Skeleton height={14} />
  <Skeleton height={14} width="80%" />
</Stack>

Card skeleton

<div style="padding:var(--dv-spacing-md)">
  <Skeleton height={160} radius="sm" style="margin-bottom:16px" />
  <Skeleton height={16} style="margin-bottom:8px" />
  <Skeleton height={12} width="70%" />
</div>

Circle (avatar placeholder)

<Group gap="md" align="center">
  <Skeleton height={40} circle />
  <Stack gap="xs">
    <Skeleton height={12} width={120} />
    <Skeleton height={10} width={80} />
  </Stack>
</Group>

Not animated

<Skeleton height={14} animate={false} />
<Skeleton height={14} animate={false} width="60%" />

Props

PropTypeDefaultDescription
heightnumber|string—Height of the placeholder block
widthnumber|string—Width of the placeholder block
radius'xs'|'sm'|'md'|'lg'|'xl'|string—Border-radius of the placeholder shape
animatebooleantruePlays a shimmer animation to signal loading
visiblebooleantrueHides skeleton and shows children when false
circleboolean—Forces equal width and height for a circular shape
classstring—Additional CSS class names
styleobject—Inline styles
childrenReactNode—Content shown when visible is false