Skeleton

Skeleton is used to show a loading state for a component, while keeping the layout size.

#

Import

Skeleton - The Skeleton component.
SkeletonText - The Skeleton for text content.

import { Skeleton, SkeletonText } from "@dreamy-ui/react/rsc";

#

Usage

Base usage of a Skeleton.

<VStack maxW='300px' gap={4}>
    <HStack>
        <Skeleton
            boxSize="10"
            rounded={"full"}
        />
        <SkeletonText
            lines={2}
        />
    </HStack>
    <Skeleton h='150px' />
</VStack>

#

Variants

Pulse

Shine

None

<Flex wrapped gap={6}>
    <VStack w='300px'>
        <Text>Pulse</Text>
        <VStack gap={4}>
            <HStack>
                <Skeleton
                    variant="pulse"
                    boxSize="10"
                    rounded={"full"}
                />
                <SkeletonText
                    variant="pulse"
                    lines={2}
                />
            </HStack>
            <Skeleton h='150px' variant="pulse" />
        </VStack>
    </VStack>
 
    <VStack w='300px'>
        <Text>Shine</Text>
        <VStack gap={4}>
            <HStack>
                <Skeleton
                    variant="shine"
                    boxSize="10"
                    rounded={"full"}
                />
                <SkeletonText
                    variant="shine"
                    lines={2}
                />
            </HStack>
            <Skeleton h='150px' variant="shine" />
        </VStack>
    </VStack>
 
    <VStack w='300px'>
        <Text>None</Text>
        <VStack gap={4}>
            <HStack>
                <Skeleton
                    variant="none"
                    boxSize="10"
                    rounded={"full"}
                />
                <SkeletonText
                    variant="none"
                    lines={2}
                />
            </HStack>
            <Skeleton h='150px' variant="none" />
        </VStack>
    </VStack>
</Flex>

Select

Slider