Skip to Content
ComponentsAvatar

Avatar

An image element with a fallback for representing the user.

CN
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
<Avatar> <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar>

Examples

Fallback

JD
<Avatar> <AvatarFallback>JD</AvatarFallback> </Avatar>

Sizes

CNCNCN
<Avatar size="sm">...</Avatar> <Avatar>...</Avatar> <Avatar size="lg">...</Avatar>

With badge

CNCN
<Avatar> <AvatarImage src="..." alt="..." /> <AvatarFallback>CN</AvatarFallback> <AvatarBadge /> </Avatar>

Group

CNJDMK
+4
<AvatarGroup> <Avatar> <AvatarImage src="..." alt="..." /> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar> <AvatarFallback>JD</AvatarFallback> </Avatar> <AvatarGroupCount>+4</AvatarGroupCount> </AvatarGroup>
Last updated on