# Skeleton

Placeholder shimmer blocks while content loads. Size with `style` width/height; pick a `shape` that matches the eventual layout.

## Examples

### Default

A single text-shaped placeholder.

```tsx
import { Skeleton } from '@var-ui/react';

<Skeleton shape="text" style={{ width: 120, height: 16 }} />
```

```astro
---
import { Skeleton } from '@var-ui/astro';
---
<Skeleton shape="text" style="width: 120px; height: 16px;" />
```

```html
<div class="var-ui-skeleton" data-shape="text" aria-hidden style="width: 120px; height: 16px;"></div>
```

### Shapes

Mix `text`, `rect`, and `circle` to sketch a profile row or card while data loads.

```tsx
import { Skeleton } from '@var-ui/react';

<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
  <Skeleton shape="circle" style={{ width: 40, height: 40 }} />
  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
    <Skeleton shape="text" style={{ width: 140, height: 14 }} />
    <Skeleton shape="rect" style={{ width: 200, height: 48 }} />
  </div>
</div>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| className | string \| undefined | no |  |  |
| shape | "text" \| "circle" \| "rect" \| undefined | no |  |  |
| style | CSSProperties \| undefined | no |  |  |

## Accessibility

Skeleton is decorative (`aria-hidden`). Announce loading on a parent region with `aria-busy` / live text rather than on the shimmer itself.