Avatar
Foto de perfil circular com iniciais ou ícone de reserva enquanto a imagem carrega ou se ela falhar.
CARO
'use client';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
export default function AvatarDemo() {
return (
<div className="flex items-center gap-4">
<Avatar>
<AvatarImage src="https://i.pravatar.cc/96?img=5" alt="Camila Azevedo" />
<AvatarFallback>CA</AvatarFallback>
</Avatar>
<Avatar>
<AvatarFallback>RO</AvatarFallback>
</Avatar>
</div>
);
}Instalação
npx shadcn@latest add @lenstech/avatarUso
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"<Avatar>
<AvatarImage src="/equipe/renata.jpg" alt="Dra. Renata Oliveira" />
<AvatarFallback>RO</AvatarFallback>
</Avatar>Exemplos
Fallback
O AvatarFallback aparece enquanto a imagem carrega e continua visível se ela falhar. getInitials gera as iniciais a partir do nome ("Ana Paula Souza" → "AS").
ASUsuário sem foto
'use client';
import { User } from 'lucide-react';
import { Avatar, AvatarFallback, AvatarImage, getInitials } from '@/components/ui/avatar';
export default function AvatarFallbackExample() {
const nome = 'Ana Paula Souza';
return (
<div className="flex items-center gap-4">
{/* Imagem quebrada: o fallback continua visível. */}
<Avatar>
<AvatarImage src="/imagem-que-nao-existe.jpg" alt={nome} />
<AvatarFallback>{getInitials(nome)}</AvatarFallback>
</Avatar>
{/* Sem foto: ícone genérico. */}
<Avatar>
<AvatarFallback>
<User className="size-4" aria-hidden="true" />
<span className="sr-only">Usuário sem foto</span>
</AvatarFallback>
</Avatar>
</div>
);
}Tamanhos e formato
Mude o tamanho com size-* e o formato com rounded-* (aplique o mesmo raio no fallback).
LMLMLMLM
'use client';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
export default function AvatarSizes() {
return (
<div className="flex items-end gap-4">
<Avatar className="size-6">
<AvatarImage src="https://i.pravatar.cc/96?img=12" alt="Lucas Martins" />
<AvatarFallback className="text-[10px]">LM</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://i.pravatar.cc/96?img=12" alt="Lucas Martins" />
<AvatarFallback>LM</AvatarFallback>
</Avatar>
<Avatar className="size-12">
<AvatarImage src="https://i.pravatar.cc/96?img=12" alt="Lucas Martins" />
<AvatarFallback>LM</AvatarFallback>
</Avatar>
<Avatar className="size-12 rounded-lg">
<AvatarImage src="https://i.pravatar.cc/96?img=12" alt="Lucas Martins" />
<AvatarFallback className="rounded-lg">LM</AvatarFallback>
</Avatar>
</div>
);
}Grupo
AvatarGroup sobrepõe os avatares e adiciona um anel na cor do fundo.
ROMTJP+4
7 profissionais na equipe'use client';
import { Avatar, AvatarFallback, AvatarGroup, AvatarImage, getInitials } from '@/components/ui/avatar';
const equipe = [
{ nome: 'Renata Oliveira', foto: 'https://i.pravatar.cc/96?img=47' },
{ nome: 'Marcos Tavares', foto: 'https://i.pravatar.cc/96?img=15' },
{ nome: 'Juliana Prado', foto: 'https://i.pravatar.cc/96?img=32' },
];
export default function AvatarGroupExample() {
return (
<div className="flex items-center gap-3">
<AvatarGroup>
{equipe.map((p) => (
<Avatar key={p.nome}>
<AvatarImage src={p.foto} alt={p.nome} />
<AvatarFallback>{getInitials(p.nome)}</AvatarFallback>
</Avatar>
))}
<Avatar>
<AvatarFallback>+4</AvatarFallback>
</Avatar>
</AvatarGroup>
<span className="text-sm text-muted-foreground">7 profissionais na equipe</span>
</div>
);
}Com nome e cargo
Quando o nome já aparece ao lado, use alt="" na imagem para o leitor de tela não repetir a informação.
RO
Dra. Renata OliveiraOrtodontista · CRO-SP 123456
'use client';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
export default function AvatarWithText() {
return (
<div className="flex items-center gap-3">
<Avatar className="size-10">
<AvatarImage src="https://i.pravatar.cc/96?img=47" alt="" />
<AvatarFallback>RO</AvatarFallback>
</Avatar>
<div className="grid text-sm leading-tight">
<span className="font-medium">Dra. Renata Oliveira</span>
<span className="text-muted-foreground">Ortodontista · CRO-SP 123456</span>
</div>
</div>
);
}Quando usar
- Use para identificar pessoas: usuário logado, profissional da equipe, autor de um comentário.
- Não use para logos de empresas ou fotos de produtos — use uma imagem comum.
- Sempre tenha um
AvatarFallback: fotos quebram e nem todo cadastro tem foto.
API
Todos os subcomponentes aceitam as props do elemento HTML correspondente.
Prop
Type