Avatar Tailwind CSS somente CSS para imagens de perfil. Tamanhos xs-xl, empilhamento de grupo e indicador de status online/offline. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Os componentes do avatar exibem imagens ou iniciais do perfil do usuário em um contêiner compacto e personalizável. Construídos com as propriedades personalizadas CSS da Frutjam, os avatares representam usuários, colaboradores ou membros da equipe em sua interface. O sistema de avatar suporta imagens e texto, vários tamanhos, cores, formas, indicadores de status, anéis e arranjos de grupo – ideal para listas de usuários, comentários, exibições de equipe, seções de perfil e interfaces de mensagens.
Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.
| Aula | Tipo | Descrição |
|---|---|---|
| avatar | Base | Recipiente de avatar circular com iniciais ou imagem |
| avatar-group | Modificador | Pilha sobreposta de vários avatares |
| avatar-ring | Modificador | Adiciona uma borda circular colorida ao redor do avatar |
| avatar-circle | Estilo | Formato totalmente circular (padrão) |
| avatar-rounded | Estilo | Forma de retângulo arredondado |
| avatar-square | Estilo | Formato quadrado sem arredondamento |
| avatar-online | Estilo | Indicador verde de status online |
| avatar-away | Estilo | Indicador amarelo de status ausente |
| avatar-busy | Estilo | Indicador vermelho de status ocupado |
| avatar-offline | Estilo | Indicador cinza de status off-line |
| avatar-xs | Tamanho | Extra pequeno |
| avatar-sm | Tamanho | Pequeno |
| avatar-md | Tamanho | Médio (padrão) |
| avatar-lg | Tamanho | Grande |
| avatar-xl | Tamanho | Extra grande |
| avatar-2xl | Tamanho | 2x extra grande |
| avatar-primary | Cor | Cor do tema principal |
| avatar-secondary | Cor | Cor do tema secundário |
| avatar-accent | Cor | Cor do tema de destaque |
| avatar-neutral | Cor | Cor neutra do tema |
| avatar-info | Cor | Cor semântica da informação |
| avatar-success | Cor | Cor semântica de sucesso |
| avatar-warning | Cor | Cor semântica de aviso |
| avatar-error | Cor | Cor semântica do erro |
| avatar-ring-primary | Cor | Anel na cor primária |
| avatar-ring-secondary | Cor | Anel em cor secundária |
| avatar-ring-accent | Cor | Anel em cor de destaque |
| avatar-ring-neutral | Cor | Anel em cor neutra |
| avatar-ring-info | Cor | Anel na cor da informação |
| avatar-ring-success | Cor | Anel na cor do sucesso |
| avatar-ring-warning | Cor | Anel na cor de aviso |
| avatar-ring-error | Cor | Anel na cor do erro |
Uso Básico
Crie avatares simples com iniciais de texto ou cores.
<div class="avatar">AB</div> |
<div className="avatar">AB</div> |
Avatar com imagens
Exiba fotos de perfil de usuário com ajuste automático de imagem e dimensionamento responsivo.
1 2 3 4 5 6 7 8 9 10 11 | <div class="avatar avatar-sm"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-md"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-lg"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" /> </div> |
Tamanhos de avatares
Use variantes de tamanho para dimensionar avatares de extrapequeno (xs) a 2x grande (2xl) para diferentes contextos.
1 2 3 4 5 6 | <div class="avatar avatar-xs avatar-primary">XS</div> <div class="avatar avatar-sm avatar-secondary">SM</div> <div class="avatar avatar-md avatar-accent">MD</div> <div class="avatar avatar-lg avatar-primary">LG</div> <div class="avatar avatar-xl avatar-secondary">XL</div> <div class="avatar avatar-2xl avatar-accent">2XL</div> |
Cores do avatar
Aplique variantes de cores para diferenciar avatares por função, equipe ou status quando não estiver usando imagens.
1 2 3 4 5 6 7 8 | <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> <div class="avatar avatar-md avatar-neutral">E</div> <div class="avatar avatar-md avatar-success">F</div> <div class="avatar avatar-md avatar-warning">G</div> <div class="avatar avatar-md avatar-error">H</div> |
Formas de Avatar
Escolha entre formas circulares (padrão), arredondadas ou quadradas para combinar com seu sistema de design.
1 2 3 | <div class="avatar avatar-lg avatar-circle avatar-primary">●</div> <div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div> <div class="avatar avatar-lg avatar-square avatar-accent">■</div> |
Avatar com iniciais
Exiba as iniciais do usuário para identificação rápida em listas, tópicos de comentários e seções da equipe.
1 2 3 4 | <div class="avatar avatar-sm avatar-primary">JD</div> <div class="avatar avatar-md avatar-secondary">AR</div> <div class="avatar avatar-lg avatar-accent">MS</div> <div class="avatar avatar-xl avatar-info">KL</div> |
Avatar com indicador de status
Combine avatares com emblemas de status para mostrar a presença ou disponibilidade do usuário (online, offline, ocupado, ausente).
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-online avatar-primary">JD</div> <div class="avatar avatar-md avatar-offline avatar-secondary">AR</div> <div class="avatar avatar-md avatar-busy avatar-accent">MS</div> <div class="avatar avatar-md avatar-away avatar-info">KL</div> |
Avatar com borda de anel
Adicione anéis decorativos ao redor dos avatares para dar ênfase, realçar status ou separação visual.
1 2 3 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div> |
Variantes de cores do anel
Escolha as cores dos anéis independentemente das cores de fundo do avatar.
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div> <div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div> <div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div> <div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div> <div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div> |
Grupo de Avatares
Empilhe vários avatares com margem negativa automática para exibição sobreposta de membros da equipe e colaboradores.
1 2 3 4 5 6 | <div class="avatar-group"> <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> </div> |
Grupo de Avatares com Tamanhos Diferentes
Combine vários tamanhos em um grupo para obter hierarquia visual.
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-sm avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-lg avatar-accent">C</div> </div> |
Grupo de Avatares com Status
Mostre o status de disponibilidade de cada membro de um grupo de equipe.
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-md avatar-online avatar-primary">A</div> <div class="avatar avatar-md avatar-offline avatar-secondary">B</div> <div class="avatar avatar-md avatar-busy avatar-accent">C</div> </div> |
Variantes Combinadas
Misture e combine modificadores de tamanho, cor, forma, status e anel para exibições complexas de avatares.
1 2 3 4 5 | <div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div> <div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div> <div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div> |
Usando Claude Code, Cursor ou outro editor de IA?
Cherry MCP fornece ao seu editor de IA os nomes exatos das classes avatar e a estrutura sob demanda. Chega de aulas alucinadas.