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
chakra 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 |