Skip to content
Vy logo
Components

Skeletons

Skeletons are loading placeholder components that let you emulate the loaded product.


Examples

A simple skeleton loader

<Stack>
  <Skeleton height={6} />
  <Skeleton height={6} />
  <Skeleton height={6} />
</Stack>

A more complex example

<SimpleGrid columns={[1, 2]} gap={3}>
  <Card variant="outlined" p={3}>
    <Stack>
      <SkeletonCircle boxSize={6} mr={3} />
      <SkeletonText noOfLines={3} width="100%" />
    </Stack>
  </Card>
  <Card variant="outlined" p={3}>
    <Stack>
      <SkeletonCircle boxSize={6} mr={3} />
      <SkeletonText noOfLines={3} width="100%" />
    </Stack>
  </Card>
</SimpleGrid>