# Skeleton

> El bloque gris que late mientras carga algo.

```tsx
import { Skeleton } from "sebs7n-ui/skeleton"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Del tamaño de lo que viene

Un skeleton que no coincide con el contenido final produce un salto peor que un spinner.

```tsx
import { Card, CardContent, CardHeader } from "sebs7n-ui/card"
import { Skeleton } from "sebs7n-ui/skeleton"

function Basico() {
  return (
    <Card className="w-full max-w-sm" aria-busy="true">
      <CardHeader>
        <Skeleton className="h-5 w-32 rounded-md" />
        <Skeleton className="h-4 w-48 rounded-md" />
      </CardHeader>
      <CardContent className="flex flex-col gap-2">
        <Skeleton className="h-4 w-full rounded-md" />
        <Skeleton className="h-4 w-full rounded-md" />
        <Skeleton className="h-4 w-2/3 rounded-md" />
      </CardContent>
    </Card>
  )
}
```

## Props

### Skeleton

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| — | No es interactivo. |

## Accesibilidad

- La animación pasa por `motion-reduce`, además del reset global del paquete.
- La región que se está cargando debería tener `aria-busy="true"`; el skeleton solo es el relleno visual.

## Reglas de uso

- **Del tamaño de lo que viene.** Un skeleton que no coincide con el contenido final produce un salto peor que un spinner.
- Para una carga de menos de ~300 ms, nada: el parpadeo molesta más que la espera.

## Relacionados

[card](/docs/components/card.md) · [table](/docs/components/table.md)