Skeleton
Skeleton is used to show a loading state for a component, while keeping the layout size.
pnpm dlx dreamy add skeletonBase usage of a Skeleton.
Tip
Tip: full is a shortcut for width="full".<VStack maxW='300px' gap={4}>
<HStack full>
<Skeleton
boxSize="10"
rounded="full"
/>
<SkeletonText
lines={2}
/>
</HStack>
<Skeleton h="150px" full />
</VStack>Pulse
Shine
None
<Flex wrapped gap={6}>
<Flex col gap={4} w='300px'>
<Text>Pulse</Text>
<Flex col gap={4}>
<HStack full>
<Skeleton
variant="pulse"
boxSize="10"
rounded={"full"}
/>
<SkeletonText
variant="pulse"
lines={2}
/>
</HStack>
<Skeleton h='150px' variant="pulse" />
</Flex>
</Flex>
<Flex col gap={4} w='300px'>
<Text>Shine</Text>
<Flex col gap={4}>
<HStack full>
<Skeleton
variant="shine"
boxSize="10"
rounded={"full"}
/>
<SkeletonText
variant="shine"
lines={2}
/>
</HStack>
<Skeleton h='150px' variant="shine" />
</Flex>
</Flex>
<Flex col gap={4} w='300px'>
<Text>None</Text>
<Flex col gap={4}>
<HStack full>
<Skeleton
variant="none"
boxSize="10"
rounded={"full"}
/>
<SkeletonText
variant="none"
lines={2}
/>
</HStack>
<Skeleton h='150px' variant="none" />
</Flex>
</Flex>
</Flex>