Skip to main content

Skeleton

Skeleton is a loading placeholder with a shimmer animation. Use it to show content structure while data is loading.

Import​

import { Skeleton } from "@tosui/react";

Basic Usage​

<Skeleton w="200px" h="20px" />

Sizes​

<VStack gap={4} align="stretch">
  <Skeleton w="100%" h="12px" />
  <Skeleton w="80%" h="12px" />
  <Skeleton w="60%" h="12px" />
</VStack>

Rounded Variants​

<HStack gap={4}>
  <Skeleton w="48px" h="48px" rounded="full" />
  <Skeleton w="48px" h="48px" rounded="md" />
  <Skeleton w="48px" h="48px" rounded="none" />
</HStack>

Loaded State​

Use isLoaded to show content when loading is complete.

function UserCard({ isLoading, user }) {
  return (
    <HStack gap={4}>
      <Skeleton w="48px" h="48px" rounded="full" isLoaded={!isLoading}>
        <Avatar src={user.avatar} name={user.name} />
      </Skeleton>
      <VStack align="flex-start" gap={2}>
        <Skeleton w="120px" h="16px" isLoaded={!isLoading}>
          <Text fontWeight="medium">{user.name}</Text>
        </Skeleton>
        <Skeleton w="80px" h="12px" isLoaded={!isLoading}>
          <Text fontSize="sm" color="foreground-muted">{user.role}</Text>
        </Skeleton>
      </VStack>
    </HStack>
  );
}

Common Patterns​

Card Skeleton​

<Box p={4} bg="surface" rounded="md" border="thin" borderColor="border" w="300px">
  <Skeleton w="100%" h="150px" rounded="md" />
  <VStack gap={3} mt={4} align="stretch">
    <Skeleton w="70%" h="16px" />
    <Skeleton w="100%" h="12px" />
    <Skeleton w="90%" h="12px" />
  </VStack>
</Box>

List Skeleton​

<VStack gap={4} align="stretch">
  {[1, 2, 3].map(i => (
    <HStack key={i} gap={4}>
      <Skeleton w="48px" h="48px" rounded="full" />
      <VStack gap={2} align="stretch" flex={1}>
        <Skeleton w="60%" h="14px" />
        <Skeleton w="40%" h="12px" />
      </VStack>
    </HStack>
  ))}
</VStack>

Text Block​

<VStack gap={2} align="stretch">
  <Skeleton w="100%" h="14px" />
  <Skeleton w="100%" h="14px" />
  <Skeleton w="100%" h="14px" />
  <Skeleton w="75%" h="14px" />
</VStack>

Props Reference​

PropTypeDefaultDescription
wstring-Width (CSS value)
hstring-Height (CSS value)
rounded"none" | "sm" | "md" | "lg" | "full""md"Border radius
isLoadedbooleanfalseWhen true, renders children instead of skeleton
childrenReactNode-Content to show when loaded

Accessibility​

  • Has aria-hidden="true" since it's decorative
  • When isLoaded is true, only children are rendered

TypeScript​

import { Skeleton, type SkeletonProps } from "@tosui/react";