Skip to main content

Skeleton

Basic​

You can use <Skeleton> and <Skeleton.Text> components to show a loading state for your components.

 
<Skeleton height="$32" />

Circle​

You can use circle prop to create a circle skeleton. You can also use color prop to change the color of the skeleton.

 
<VStack gap="$4">
  <Skeleton circle width="$10" />
  <Skeleton circle width="$24" />
  <Skeleton color="$red.500" circle width="$10" />
  <Skeleton color="$blue.300" circle width="$24" />
</VStack>

Text​

You can use <Skeleton.Text> to represent a loading state for your text components.

 
<VStack gap="$4">
  <Skeleton.Text lines={2} />
  <Skeleton.Text color="$emerald.400" lines={4} />
</VStack>

Composite​

You can create compositions by combining <Skeleton> and <Skeleton.Text> like this:

 
<VStack gap="$4">
  <Skeleton animation="pulse" height="$32" />
  <Skeleton
    animation="pulse"
    height="$32"
    width="$1/2"
    alignSelf="center"
    padding="$4"
  />
  <HStack gap="$2">
    <Skeleton circle width="$10" />
    <Skeleton.Text lines={4} />
  </HStack>
</VStack>

Wave effect​

 
<Skeleton animation="wave" height="$32" />

Slow effect​

 
<Skeleton duration={2000} height="$32" />