Skeleton

The Skeleton component displays a placeholder shape while content is loading. It helps communicate the structure of content before the actual content is available.

import Skeleton from "rocksolidjs/Skeleton";

export default function Example() {
  return (
    <div class="flex items-center gap-3">
      <Skeleton variant="circle" class="size-10 shrink-0" />
      <div class="flex flex-col gap-2">
        <Skeleton class="h-4 w-32" />
        <Skeleton class="h-3 w-48" />
      </div>
    </div>
  );
}

Examples

Variants

Use the variant prop to control the shape of the Skeleton.

import Skeleton from "rocksolidjs/Skeleton";

export default function Example() {
  return (
    <div class="flex items-center gap-4">
      <Skeleton variant="circle" />
      <Skeleton variant="rectangle" />
    </div>
  );
}

Custom Styling

Use the class prop to add custom CSS classes to the Skeleton.

import Skeleton from "rocksolidjs/Skeleton";

export default function Example() {
  return (
    <div class="flex flex-col gap-3">
      <Skeleton class="h-4 w-64" />
      <Skeleton class="h-4 w-48" />
      <Skeleton class="h-24 w-full" />
    </div>
  );
}

The class prop can be used to customize the Skeleton’s appearance or adjust its dimensions based on the content it represents.

Accessibility

• Use Skeleton only as a visual loading indicator and do not rely on it to communicate essential information.
• Ensure that the loading state is communicated appropriately to assistive technologies when necessary.
• Replace the Skeleton with the actual content when loading is complete.
• Avoid using excessive Skeleton elements that make the loading state difficult to understand.

API

Skeleton

The Skeleton component supports custom styling and different placeholder shapes for representing loading content.

Related Components

• Spinner — Use Spinner to indicate that content or an operation is loading.
• Progress — Use to communicate the progress of an ongoing operation.