Ravox KitBásicos
Esqueleto
O lugar do conteúdo enquanto ele carrega: blocos soltos no tamanho que você quiser e os formatos prontos de parágrafo, cartão e lista. O brilho passa devagar e some com movimento reduzido.
Ajustes
Formato
Animação
Exemplos
Montado com blocos
Carregando perfil
Cards de métrica
Carregando métricas
Lista sem avatar
Cartão sem imagem
Instalação
O shadcn cria components/ui/esqueleto.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/esqueleto.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| forma | "bloco" | "texto" | "circulo" | "bloco" | Texto tem a altura de uma linha; círculo é o lugar de um avatar. O tamanho vem do className. |
| animacao | "brilho" | "pulso" | "nenhuma" | "brilho" | Brilho que atravessa, opacidade que pulsa ou parado. Todos param com movimento reduzido. |
| EsqueletoTexto linhas | number | 3 | Linhas do parágrafo; a última fica com 60%. |
| EsqueletoCartao midia | boolean | true | Área de imagem 16:9 no topo do cartão. |
| EsqueletoLista itens / avatar | number / boolean | 3 / true | Quantas linhas e se cada uma tem o círculo do avatar. |
| rotulo | string | "Carregando" | Nos formatos prontos: o que o leitor de tela anuncia (role="status"). Os blocos ficam escondidos dele. |