Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundEnterpriseBlog
Sponsor

Skeleton

Used to render a placeholder while the content is loading.

SourceStorybookRecipe

Setup

If you don't already have the snippet, run the following command to add the skeleton snippet

chakra snippet add skeleton

The snippet includes components for skeleton text and circle using the Skeleton component.

Usage

import {
  Skeleton,
  SkeletonCircle,
  SkeletonText,
} from "@/components/ui/skeleton"
<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.

Select
Select

Variants

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

pulse

shine

Content Loading

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

Chakra UI is cool

Props

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'

The color palette of the component

loading true
'true' | 'false'

The loading of the component

variant 'pulse'
'pulse' | 'shine' | 'none'

The variant of the component

Previous

Separator

Next

Slider