Skip to content

Avatar

A picture, falling back to initials while it loads or if it fails. Pass the person's name as alt.

Sourcecomponents/avatar.tsx

Image

Fallback

Broken image

Sizes

Group

+2

Usage

Avatar usage
import { Avatar, AvatarGroup } from "@/components/avatar";
export function AvatarUsage({ people }: { people: { name: string; photo?: string }[] }) {  return (    <AvatarGroup more={people.length > 3 ? people.length - 3 : undefined}>      {people.slice(0, 3).map((person) => (        <Avatar key={person.name} src={person.photo} alt={person.name} />      ))}    </AvatarGroup>  );}

When to use

Use when

A person's or workspace's picture with initials fallback; alt is their name (alt="" only when the name is already in text beside it). AvatarGroup for several

Don’t use when

Product images or logos (use an img)