# Skeleton

A placeholder shaped like content that is still loading.

```tsx
import { Skeleton } from "@/components/ui/skeleton"

<div role="status" className="text-sm text-muted-foreground">Loading orders…</div>
<Skeleton className="h-4 w-56" />
```

## Usage

### What you provide
- Size through classes (`h-4 w-[220px]`, `size-10 rounded-full`) that mirror the final layout.
- Use it for loads longer than ~300ms. The animation stops under `prefers-reduced-motion`.

## Accessibility

- A skeleton is decorative: PUI hides it from screen readers (`aria-hidden`) and stops the pulse when the person prefers reduced motion.
- Always pair it with text in a `role="status"` region that names what is loading ("Loading orders…"), and set `aria-busy` on the region being updated, back to `false` when done.
- A skeleton never replaces the outcome: end every wait with the content, an error with "Try again", or an empty state.
- Don't draw fake buttons or links in a skeleton, and don't move focus while it updates.

_Adapted from Magoo 1.6.0 by Marcelo Sales: [Loading and progress](https://magoo.cc/en/components/messages/loading-progress.html) (`carregamento-progresso`). Magoo is educational guidance; test the behavior in your implementation._

## API

Install:

```bash
npx @aline-aroucha/pui add skeleton
```

```tsx
<div role="status">Loading…</div>
<Skeleton />
```

### Skeleton

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | — | Size and shape, e.g. "h-4 w-40" or "size-10 rounded-full". |

## Related pages

- [Alert](https://aline-aroucha.github.io/pui/components/alert.html)
- [Table](https://aline-aroucha.github.io/pui/components/table.html)

---
PUI documentation · https://aline-aroucha.github.io/pui/components/skeleton.html