Skeleton

Usage

import { Skeleton, SkeletonCircle, SkeletonText } from "@chakra-ui/react"

<Stack gap="6" maxW="xs">
  <HStack width="full">
    <SkeletonCircle size="10" />
    <SkeletonText noOfLines={2} />
  </HStack>
  <Skeleton height="200px" />
</Stack>

Examples

Feed

Use the Skeleton component to create a feed skeleton.

Text

Use the SkeletonText component to create a skeleton for text.

With Children

Use the loading prop to show the skeleton while the content is loading.

Variants

Use the variant prop to change the visual style of the Skeleton.

Content Loading

When loading is changed to false, the Skeleton component will fade in.

Start and End Color

Use the --start-color and --end-color CSS variables to change the start and end color of the skeleton.

Props