# Skeleton

> Loading placeholders shaped like the content they stand in for, with a soft shimmer.

Category: Feedback. Docs page: https://rime.mjsons.net/components/skeleton

## Installation

```bash
npx shadcn@latest add KezLahd/rime/skeleton
```

Skeleton draws a block, a text line or a circle. Size each one to the real content (the Table does this per column) so nothing jumps when data arrives.

## Usage

```tsx
import { Skeleton, SkeletonText } from "@/components/ui";

<Skeleton width={180} height={20} />
<SkeletonText lines={3} />
```

## Props: Skeleton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `width` | `number \| string` | `"100%"` | Size to the real content it stands in for, not a generic block. |
| `height` | `number \| string` |  |  |
| `variant` | `"text" \| "block" \| "circle"` | `"block"` | text = a line of text at the given font size's height; circle = avatar. |
| `radius` | `number \| string` |  |  |
| `className` | `string` |  |  |
| `style` | `CSSProperties` |  |  |

## Props: SkeletonText

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `lines` | `number` | `3` |  |
| `lastLineWidth` | `string` | `"62%"` | Last line is shorter, as real paragraphs are. |
| `lineHeight` | `number` | `14` |  |
| `className` | `string` |  |  |

## Examples

### Shapes

```tsx
<Skeleton variant="circle" width={36} height={36} />
<SkeletonText lines={2} />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--r-circle` | `50%` |
| `--r-flat` | `var(--skeleton-radius)` |

System tokens it reads: `--ease`, `--r-2xs`, `--r-xs`, `--rgb-brand-deep`, `--rgb-white`, `--skeleton-radius`.

## Accessibility

- Hidden from assistive tech; mark the loading region aria-busy instead.

## Do

- Match the real layout's dimensions.

## Don't

- Don't show grey blocks with no relation to the content.