Skeleton

Usage

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

<Stack gap="6">
  <HStack>
    <SkeletonCircle boxSize="10" />
    <SkeletonText noOfLines={2} />
  </HStack>
  <Skeleton height="48" />
</Stack>

Examples

Text

Use the SkeletonText component to create a skeleton for text.

Variants

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

Feed

Use the Skeleton component to create a feed skeleton.

Content Loading

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

Custom Colors

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

Props