Avatar
An easily stylable avatar component.
AI
import {
Avatar,
AvatarFallback,
AvatarImage,
} from '@/components/ui/avatar';
export function AvatarDemo() {
return (
<Avatar>
<AvatarImage
alt='Avatar image'
src='https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80'
/>
<AvatarFallback>AI</AvatarFallback>
</Avatar>
);
}
Installation
Usage
import {
Avatar,
AvatarFallback,
AvatarImage
} from "@/components/ui/avatar"<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="Shadcn avatar" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>Examples
With Badge
JD
import {
Avatar,
AvatarBadge,
AvatarFallback,
AvatarImage,
} from '@/components/ui/avatar';
export function AvatarWithBadge() {
return (
<Avatar>
<AvatarImage
src='https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=128&h=128&dpr=2&q=80'
alt='Avatar'
/>
<AvatarFallback>JD</AvatarFallback>
<AvatarBadge className='bg-green-600' />
</Avatar>
);
}
Badge with Icon
MK
import {
Avatar,
AvatarBadge,
AvatarFallback,
AvatarImage,
} from '@/components/ui/avatar';
import { PlusIcon } from 'lucide-react';
export function AvatarBadgeIcon() {
return (
<Avatar>
<AvatarImage
src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=128&h=128&dpr=2&q=80'
alt='Avatar'
/>
<AvatarFallback>MK</AvatarFallback>
<AvatarBadge>
<PlusIcon />
</AvatarBadge>
</Avatar>
);
}
Group
JDMKTS
+3
import {
Avatar,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarImage,
} from '@/components/ui/avatar';
export function AvatarGroupDemo() {
return (
<AvatarGroup>
<Avatar>
<AvatarImage
src='https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=128&h=128&dpr=2&q=80'
alt='Avatar 1'
/>
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=128&h=128&dpr=2&q=80'
alt='Avatar 2'
/>
<AvatarFallback>MK</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
src='https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=128&h=128&dpr=2&q=80'
alt='Avatar 3'
/>
<AvatarFallback>TS</AvatarFallback>
</Avatar>
<AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>
);
}