Ravox KitBásicos
Avatar
Foto da pessoa com as iniciais de reserva enquanto carrega ou se falhar, em quatro tamanhos, redondo ou quadrado, com o pontinho de status. O grupo empilha e resume o resto em +N.
Ajustes
Conteúdo
Tamanho
Forma
Status
Cor das iniciais
Exemplos
Tamanhos
Grupo com +N
+8Status da equipe
- Marina DuarteSuporte · online
- Caio LimaFinanceiro · ocupado
- Beatriz NogueiraLogística · ausente
- Rafael CoutoVendas · offline
Empresa e projeto
Foto que falhou
A foto não carregou: ficam as iniciais.Instalação
O shadcn cria components/ui/avatar.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/avatar.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| nome | string | — | Obrigatório. Vira o nome lido por leitores de tela e as iniciais ("Ana Paula Souza" → AS). |
| src | string | — | URL da foto. Some com um fade quando carrega; se falhar, ficam as iniciais. |
| tamanho | "mini" | "pequeno" | "medio" | "grande" | "medio" | 24, 32, 40 ou 56px. Dentro do grupo, herda o tamanho dele. |
| forma | "circulo" | "quadrado" | "circulo" | Quadrado de canto arredondado para empresas, times e projetos. |
| cor | "auto" | "rosa" | "amarelo" | "lima" | "azul" | — | Disco sólido na cor da casa; as iniciais saem escuras ou brancas conforme a cor. "auto" escolhe pelo nome (sempre a mesma cor para a mesma pessoa). Sem cor: neutro. |
| status | "online" | "ausente" | "ocupado" | "offline" | — | Pontinho no canto; o estado entra no nome lido ("Ana Souza, online"). |
| fallback | ReactNode | — | Troca as iniciais (um ícone de usuário, por exemplo). |
| GrupoAvatares max | number | 4 | Quantos aparecem no grupo; o resto vira +N. |
| GrupoAvatares total | number | — | Total real quando a lista é só uma amostra (3 fotos de 128 membros → +125). |
| GrupoAvatares tamanho / forma | igual ao Avatar | "medio" | Vale para todos os avatares do grupo e para o +N. |