# Skeleton

Marca de lugar enquanto o dado não chegou.

Da a forma com utilitarios: `<Skeleton className="h-4 w-40" />`. Reproduza o
formato do conteúdo que vai chegar, senao a tela pula quando ele chega.

Fica escondido do leitor de tela de propósito. Marque o container com
`aria-busy="true"`, que é onde o aviso de carregamento pertence. Respeita
`prefers-reduced-motion`.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `Skeleton` - mesma marca de lugar, mesmo token, e o mesmo pulso de 2 s; parado com reduzir movimento. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { Skeleton } from '@rivocode/ui'
```

## Exemplos

### Linhas de tabela

```tsx
import { Card, Skeleton } from '@rivocode/ui'

export function TableRows() {
  return (
    <Card className="max-w-lg">
      <div className="flex flex-col gap-3 p-5" aria-busy="true">
        {[0, 1, 2, 3].map(i => (
          <div key={i} className="flex items-center gap-4">
            <Skeleton className="size-[18px] rounded-sm" />
            <Skeleton className="h-4 w-14" />
            <Skeleton className="h-4 flex-1" />
            <Skeleton className="h-5 w-16 rounded-pill" />
          </div>
        ))}
      </div>
    </Card>
  )
}
```

### Cartão

```tsx
import { Card, Skeleton } from '@rivocode/ui'

export function AsCard() {
  return (
    <Card className="max-w-sm">
      <div className="flex flex-col gap-3 p-5" aria-busy="true">
        <Skeleton className="h-6 w-40" />
        <Skeleton className="h-4 w-24" />
        <Skeleton className="h-12 w-full" />
      </div>
    </Card>
  )
}
```

## Props

Não tem prop própria. Repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Alert](/componentes/alert.md)
- [Badge](/componentes/badge.md)
- [EmptyState](/componentes/empty-state.md)
- [Indicator](/componentes/indicator.md)
- [Kbd](/componentes/kbd.md)
- [Meter](/componentes/meter.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)