> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Skeleton

> Placeholder for loading states.

<Info>
  Skeleton renders lightweight gray blocks that mimic the shape of content while data loads.
</Info>

* **Location**: `sabo/src/components/ui/skeleton.tsx`

## When to use

* Reserve vertical space and reduce layout shift while waiting for data.
* Prefer Spinner for small inline tasks; Skeleton for structured blocks.

## Usage

```tsx sabo/src/components/ui/skeleton.tsx theme={null}
import { Skeleton } from "@/components/ui/skeleton";

export function Example() {
  return (
    <div className="w-64 space-y-2">
      <Skeleton className="h-5 w-40" />
      <Skeleton className="h-3 w-64" />
      <Skeleton className="h-3 w-56" />
    </div>
  );
}
```

## Key props

<ParamField path="className" type="string">
  Set width/height and rounding (<code>h-4 w-32 rounded-md</code>) to match final content shape.
</ParamField>

## Styling tip

* Keep colors subtle. Avoid using Skeleton for long periods—swap to content as soon as possible.

## Accessibility

* Skeletons are decorative; ensure a live region or status conveys overall loading state elsewhere.