Skeleton

Use to show a placeholder while content is loading.

API reference

Prop	Type	Default	Responsive
width	number	80	No
height	number	24	No
rounded	boolean	false	No
className	string	-	No
style	CSSProperties	-	No

Examples

Demo 1

You can use a mix of different sizes to create a more complex skeleton.

<Flex gap="4">
  <Skeleton rounded width={48} height={48} />
  <Flex direction="column" gap="4">
    <Skeleton width={200} height={8} />
    <Skeleton width={200} height={8} />
    <Skeleton width={200} height={8} />
    <Flex gap="4">
      <Skeleton width="100%" height={8} />
      <Skeleton width="100%" height={8} />
    </Flex>
  </Flex>
</Flex>

Demo 2

You can use a mix of different sizes to create a more complex skeleton.

<Flex direction="column" gap="4">
  <Skeleton width={400} height={160} />
  <Skeleton width={400} height={12} />
  <Skeleton width={240} height={12} />
</Flex>