Carregando…
Carregando…
Carregando…User avatar with image, initials, icon, status dot, 6 sizes, 3 shapes and stacked group mode.
$ npx kikitocn add avatar@/lib/utilsimport { Avatar } from "@/components/ui/cn/avatar/Avatar";
export function AvatarExample() {
return (
<div className="flex items-center gap-3">
<Avatar
src="https://github.com/devjuanmarcos.png"
alt="Juan Marcos"
size="md"
/>
<Avatar name="Juan Marcos" size="md" />
<Avatar size="md" />
</div>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
src | string | undefined | URL da imagem |
alt | string | undefined | Texto alternativo da imagem |
name | string | undefined | Nome do usuário (gera iniciais como fallback) |
icon | ReactNode | undefined | Ícone fallback quando não há imagem nem nome |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | Tamanho do avatar |
variant | 'circle' | 'rounded' | 'square' | 'circle' | Forma do avatar |
status | 'online' | 'offline' | 'away' | 'busy' | 'none' | 'none' | Indicador de presença |
xs · sm · md · lg · xl · 2xl
circle · rounded · square
online · offline · away · busy
initials · icon · image
Avatar Group — overlapping initials stack with overflow counter