Skeleton
Used to render a placeholder while the content is loading.
AI TipWant to skip the docs? Use the MCP Server
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
| Prop | Default | Type |
|---|---|---|
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.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |