Skeleton

A pulsing placeholder used while content is loading. For containers with multiple skeletons, set `aria-busy="true"` on the parent element so assistive technology knows to wait for content.

Examples

Default

<Skeleton height={20} radius={3} width={240} />

Radius Variants

0

1

2

3

4

none

rounded

<HStack gap={4}>
  <VStack align="center" gap={1}>
    <Skeleton height={40} radius={0} width={80} />
    <Text as="span" color="secondary" type="supporting">
      0
    </Text>
  </VStack>
  <VStack align="center" gap={1}>
    <Skeleton height={40} radius={1} width={80} />
    <Text as="span" color="secondary" type="supporting">
      1
    </Text>
  </VStack>
  <VStack align="center" gap={1}>
    <Skeleton height={40} radius={2} width={80} />
    <Text as="span" color="secondary" type="supporting">
      2
    </Text>
  </VStack>
  <VStack align="center" gap={1}>
    <Skeleton height={40} radius={3} width={80} />
    <Text as="span" color="secondary" type="supporting">
      3
    </Text>
  </VStack>
  <VStack align="center" gap={1}>
    <Skeleton height={40} radius={4} width={80} />
    <Text as="span" color="secondary" type="supporting">
      4
    </Text>
  </VStack>
  <VStack align="center" gap={1}>
    <Skeleton height={40} radius="none" width={80} />
    <Text as="span" color="secondary" type="supporting">
      none
    </Text>
  </VStack>
  <VStack align="center" gap={1}>
    <Skeleton height={40} radius="rounded" width={40} />
    <Text as="span" color="secondary" type="supporting">
      rounded
    </Text>
  </VStack>
</HStack>

String Dimensions

<VStack gap={3}>
  <Skeleton height="2rem" width="50%" />
  <Skeleton height="1.5rem" width="75%" />
  <Skeleton height="1rem" width="100%" />
</VStack>

Staggered

<VStack gap={2}>
  <Skeleton height={16} staggerIndex={0} width="90%" />
  <Skeleton height={16} staggerIndex={1} width="70%" />
  <Skeleton height={16} staggerIndex={2} width="80%" />
  <Skeleton height={16} staggerIndex={3} width="60%" />
</VStack>

Content Block

<VStack gap={3}>
  <Skeleton height={40} radius="rounded" width={40} />
  <Skeleton height={20} staggerIndex={0} width="80%" />
  <Skeleton height={20} staggerIndex={1} width="60%" />
  <Skeleton height={80} staggerIndex={2} width="100%" />
</VStack>

Card Loading

<Card padding={4} style={{maxWidth: 320}}>
  <VStack gap={3}>
    <HStack gap={3}>
      <Skeleton height={48} radius="rounded" width={48} />
      <VStack gap={2} style={{flex: 1}}>
        <Skeleton height={16} staggerIndex={0} width="60%" />
        <Skeleton height={12} staggerIndex={1} width="40%" />
      </VStack>
    </HStack>
    <Skeleton height={14} staggerIndex={2} width="100%" />
    <Skeleton height={14} staggerIndex={3} width="90%" />
    <Skeleton height={14} staggerIndex={4} width="70%" />
  </VStack>
</Card>

List Loading

<VStack gap={4}>
  {[0, 1, 2, 3].map(i => (
    <HStack gap={3} key={i}>
      <Skeleton height={40} radius="rounded" staggerIndex={i} width={40} />
      <VStack gap={2} style={{flex: 1}}>
        <Skeleton height={14} staggerIndex={i} width="50%" />
        <Skeleton height={12} staggerIndex={i + 1} width="30%" />
      </VStack>
    </HStack>
  ))}
</VStack>

API

Skeleton

A pulsing placeholder used while content is loading. For containers with multiple skeletons, set `aria-busy="true"` on the parent element so assistive technology knows to wait for content.

Prop	Type	Default	Description
aria-label	string	'Loading'	Accessible label for the loading placeholder.
className	string	—	Additional CSS class names applied to the skeleton.
data-testid	string	—	Test ID applied to the skeleton.
height	number | string	'100%'	Skeleton height. Numbers are treated as pixels.
radius	0 | 1 | 2 | 3 | 4 | "none" | "rounded"	3	Border radius token.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the skeleton element.
staggerIndex	number	0	Animation stagger index for lists of skeletons. Controls the delay before the shimmer animation starts, creating a wave effect.
style	CSSProperties	—	Inline styles applied to the skeleton.
width	number | string	'100%'	Skeleton width. Numbers are treated as pixels.