Skeleton

Skeleton is used to display the loading state of some components.

chakra ui pro

Import#

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

Usage#

You can use it as a standalone component.

Editable Example

Or to wrap another component to take the same height and width.

contents wrapped
won't be visible
Editable Example

Useful when fetching remote data.

import { Box } from "@chakra-ui/react"
function Card() {
const { data, loading, error } = useRemoteData()
if (error) return <Box children="error" />
return (
<Box>
<Skeleton isLoaded={!loading}>
<Heading>{data.title}</Heading>
</Skeleton>
</Box>
)
}

Circle and Text Skeleton#

Editable Example

Skeleton color#

You can change the animation color with startColor and endColor.

Editable Example

Skipping the skeleton when content is loaded#

You can prevent the skeleton from rendering using the isLoaded prop.

Chakra ui is cool
Editable Example

Props#

colorScheme

Description

Color Schemes for Skeleton are not implemented in the default theme. You can extend the theme to implement them.

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

endColor

Description

The color at the animation end

Type
string

fadeDuration

Description

The fadeIn duration in seconds

Type
number
Default
0.4

isLoaded

Description

If true, it'll render its children with a nice fade transition

Type
boolean

size

Description

Sizes for Skeleton are not implemented in the default theme. You can extend the theme to implement them.

Type
string

speed

Description

The animation speed in seconds

Type
number
Default
0.8

startColor

Description

The color at the animation start

Type
string

variant

Description

Variants for Skeleton are not implemented in the default theme. You can extend the theme to implement them.

Type
string

Proudly made inNigeria by Segun Adebayo