Skeleton

The Skeleton component provides a low-fidelity representation of elements that are not yet ready. It’s commonly used to indicate loading states, giving users a sense of progress and reducing perceived wait times by showing the layout of the content that will eventually appear.

The Skeleton component acts as a container that applies an animating pulse effect, while SkeletonItem is used for the individual placeholder blocks within it.

Installation

Add the Skeleton and SkeletonItem components to your project using the OrbitUI CLI:

npx orbitkit@latest add skeleton

Usage

Import the Skeleton and SkeletonItem components and use them in your Astro components or pages. Wrap your SkeletonItem instances within the Skeleton component to apply the pulsing animation.

You’ll typically apply w- and h- utility classes to SkeletonItem to define the dimensions of your placeholder blocks, mimicking the size of the content they represent.

Preview

Code

index.astro

---
import { Card, CardContent } from "@/components/ui/card";
import { Skeleton, SkeletonItem } from "@/components/ui/skeleton";
---

<Skeleton class="flex max-w-xs mx-auto flex-col space-y-3">
  <Card>
    <CardContent>
      <SkeletonItem class="h-[125px] w-full">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="size-20"
        >
          <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
          <circle cx="9" cy="9" r="2"></circle>
          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
        </svg>
      </SkeletonItem>
      <div class="space-y-2">
        <SkeletonItem class="h-4 w-[90%]" />
        <SkeletonItem class="h-4 w-[70%]" />
      </div>
    </CardContent>
  </Card>
</Skeleton>

Props

Skeleton

The Skeleton component acts as a wrapper for the pulsing animation. This component accepts all the standard HTML attributes that a div element would.

SkeletonItem

The SkeletonItem component represents an individual content block that is being loaded. This component accepts all the standard HTML attributes that a div element would.