import { HStack, Stack } from "@chakra-ui/react"
import { Skeleton, SkeletonCircle } from "@/components/ui/skeleton"
const Demo = () => {
return (
<HStack gap="5">
<SkeletonCircle size="12" />
<Stack flex="1">
<Skeleton height="5" />
<Skeleton height="5" width="80%" />
</Stack>
</HStack>
)
}
Setup
If you don't already have the snippet, run the following command to add the
skeleton snippet
npx @chakra-ui/cli snippet add skeletonThe 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.
import { HStack, Stack } from "@chakra-ui/react"
import {
Skeleton,
SkeletonCircle,
SkeletonText,
} from "@/components/ui/skeleton"
const Demo = () => {
return (
<Stack gap="6" maxW="xs">
<HStack width="full">
<SkeletonCircle size="10" />
<SkeletonText noOfLines={2} />
</HStack>
<Skeleton height="200px" />
</Stack>
)
}
Text
Use the SkeletonText component to create a skeleton for text.
import { SkeletonText } from "@/components/ui/skeleton"
const Demo = () => {
return <SkeletonText noOfLines={3} gap="4" />
}
With Children
Use the loading prop to show the skeleton while the content is loading.
Select
Select
import { Badge, HStack } from "@chakra-ui/react"
import { Skeleton } from "@/components/ui/skeleton"
const Demo = () => {
return (
<HStack gap="4">
<Skeleton asChild loading={true}>
<Badge>Select</Badge>
</Skeleton>
<Skeleton loading={false}>
<Badge>Select</Badge>
</Skeleton>
</HStack>
)
}
Variants
Use the variant prop to change the visual style of the Skeleton.
pulse
shine
import { HStack, Stack, Text } from "@chakra-ui/react"
import { Skeleton } from "@/components/ui/skeleton"
const Demo = () => {
return (
<Stack gap="5">
<HStack gap="5">
<Text width="8ch">pulse</Text>
<Skeleton flex="1" height="5" variant="pulse" />
</HStack>
<HStack gap="5">
<Text width="8ch">shine</Text>
<Skeleton flex="1" height="5" variant="shine" />
</HStack>
</Stack>
)
}
Content Loading
When loading is changed to false, the Skeleton component will fade in.
Chakra UI is cool
"use client"
import { Stack, Text } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { useState } from "react"
const Demo = () => {
const [loading, setLoading] = useState(true)
return (
<Stack align="flex-start" gap="4">
<Skeleton height="6" loading={loading}>
<Text>Chakra UI is cool</Text>
</Skeleton>
<Button size="sm" onClick={() => setLoading((c) => !c)}>
Toggle
</Button>
</Stack>
)
}
Props
| Prop | Default | Type |
|---|---|---|
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 |