Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Skeleton

Used to render a placeholder while the content is loading.

SourceStorybookRecipe

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.

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

Start and End Color

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

Props

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

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

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Previous

Separator

Next

Slider