Avatar

MqdER

CNLRER

import {	Avatar,	AvatarBadge,	AvatarFallback,	AvatarGroup,	AvatarGroupCount,	AvatarImage,} from "@/components/ui/avatar";
export function AvatarDemo() {	return (		<div className="flex flex-row flex-wrap items-center justify-center gap-6 md:gap-12">			<Avatar>				<AvatarImage src="https://github.com/Maqed.png" alt="@0xMaqed" />				<AvatarFallback>Mqd</AvatarFallback>			</Avatar>			<Avatar>				<AvatarImage					src="https://github.com/evilrabbit.png"					alt="@evilrabbit"				/>				<AvatarFallback>ER</AvatarFallback>				<AvatarBadge className="bg-green-600 dark:bg-green-800" />			</Avatar>			<AvatarGroup>				<Avatar>					<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />					<AvatarFallback>CN</AvatarFallback>				</Avatar>				<Avatar>					<AvatarImage						src="https://github.com/maxleiter.png"						alt="@maxleiter"					/>					<AvatarFallback>LR</AvatarFallback>				</Avatar>				<Avatar>					<AvatarImage						src="https://github.com/evilrabbit.png"						alt="@evilrabbit"					/>					<AvatarFallback>ER</AvatarFallback>				</Avatar>				<AvatarGroupCount>+3</AvatarGroupCount>			</AvatarGroup>		</div>	);}

Installation

pnpm dlx shadcn@latest add @herocn/avatar

Usage

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

<Avatar>  <AvatarImage src="https://github.com/shadcn.png" />  <AvatarFallback>CN</AvatarFallback></Avatar>

Composition

Use the following composition to build an Avatar:

Avatar├── AvatarImage├── AvatarFallback└── AvatarBadge

Use the following composition to build an AvatarGroup:

AvatarGroup├── Avatar│   ├── AvatarImage│   ├── AvatarFallback│   └── AvatarBadge├── Avatar│   ├── AvatarImage│   ├── AvatarFallback│   └── AvatarBadge└── AvatarGroupCount

Examples

Basic

A basic avatar component with an image and a fallback.

Mqd

import {	Avatar,	AvatarFallback,	AvatarImage,} from "@/components/ui/avatar";
export function AvatarBasic() {	return (		<Avatar>			<AvatarImage src="https://github.com/Maqed.png" alt="@0xMaqed" />			<AvatarFallback>Mqd</AvatarFallback>		</Avatar>	);}

Badge

Use the AvatarBadge component to add a badge to the avatar. Serves the same purpose as HeroUI badge

Mqd1Mqd2Mqd3Mqd4Mqd5

import {	Avatar,	AvatarBadge,	AvatarFallback,	AvatarImage,} from "@/components/ui/avatar";
export function AvatarWithBadge() {	const positions = [		"bottom-end",		"bottom-start",		"top-end",		"top-start",	] as const;	const variants = [		"default",		"primary",		"success",		"warning",		"destructive",	] as const;	return (		<div className="flex flex-wrap items-center justify-center gap-2">			{variants.map((variant, index) => (				<Avatar key={`avatar-badge-variant-${variant}`}>					<AvatarImage src="https://github.com/Maqed.png" alt="@0xMaqed" />					<AvatarFallback>Mqd</AvatarFallback>					<AvatarBadge position={positions[index % 4]} variant={variant}>						{index + 1}					</AvatarBadge>				</Avatar>			))}		</div>	);}

Use the className prop to add custom styles to the badge such as custom colors, sizes, etc.

<Avatar>  <AvatarImage src="https://github.com/Maqed.png" alt="@0xMaqed" />  <AvatarFallback>Mqd</AvatarFallback>  <AvatarBadge className="bg-green-600 dark:bg-green-800" /></Avatar>

Badge with Icon

You can also use an icon inside <AvatarBadge>.

Mqd

import { PlusIcon } from "lucide-react";import {	Avatar,	AvatarBadge,	AvatarFallback,	AvatarImage,} from "@/components/ui/avatar";
export function AvatarBadgeIconExample() {	return (		<Avatar>			<AvatarImage src="https://github.com/Maqed.png" alt="@0xMaqed" />			<AvatarFallback>Mqd</AvatarFallback>			<AvatarBadge variant="primary">				<PlusIcon />			</AvatarBadge>		</Avatar>	);}

Avatar Group

Use the AvatarGroup component to add a group of avatars.

CNLRMqd

import {	Avatar,	AvatarFallback,	AvatarGroup,	AvatarImage,} from "@/components/ui/avatar";
export function AvatarGroupExample() {	return (		<AvatarGroup>			<Avatar>				<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />				<AvatarFallback>CN</AvatarFallback>			</Avatar>			<Avatar>				<AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />				<AvatarFallback>LR</AvatarFallback>			</Avatar>			<Avatar>				<AvatarImage src="https://github.com/Maqed.png" alt="@0xMaqed" />				<AvatarFallback>Mqd</AvatarFallback>			</Avatar>		</AvatarGroup>	);}

Avatar Group Count

Use <AvatarGroupCount> to add a count to the group.

MqdLRER

import {	Avatar,	AvatarFallback,	AvatarGroup,	AvatarGroupCount,	AvatarImage,} from "@/components/ui/avatar";
export function AvatarGroupCountExample() {	return (		<AvatarGroup>			<Avatar>				<AvatarImage src="https://github.com/Maqed.png" alt="@0xMaqed" />				<AvatarFallback>Mqd</AvatarFallback>			</Avatar>			<Avatar>				<AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />				<AvatarFallback>LR</AvatarFallback>			</Avatar>			<Avatar>				<AvatarImage					src="https://github.com/evilrabbit.png"					alt="@evilrabbit"				/>				<AvatarFallback>ER</AvatarFallback>			</Avatar>			<AvatarGroupCount>+3</AvatarGroupCount>		</AvatarGroup>	);}

Avatar Group with Icon

You can also use an icon inside <AvatarGroupCount>.

CNMqdER

import { PlusIcon } from "lucide-react";import {	Avatar,	AvatarFallback,	AvatarGroup,	AvatarGroupCount,	AvatarImage,} from "@/components/ui/avatar";
export function AvatarGroupCountIconExample() {	return (		<AvatarGroup>			<Avatar>				<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />				<AvatarFallback>CN</AvatarFallback>			</Avatar>			<Avatar>				<AvatarImage src="https://github.com/Maqed.png" alt="@0xMaqed" />				<AvatarFallback>Mqd</AvatarFallback>			</Avatar>			<Avatar>				<AvatarImage					src="https://github.com/evilrabbit.png"					alt="@evilrabbit"				/>				<AvatarFallback>ER</AvatarFallback>			</Avatar>			<AvatarGroupCount>				<PlusIcon />			</AvatarGroupCount>		</AvatarGroup>	);}

Sizes

Use the size prop to change the size of the avatar.

MqdMqdMqd

import {	Avatar,	AvatarFallback,	AvatarImage,} from "@/components/ui/avatar";
export function AvatarSizeExample() {	return (		<div className="flex flex-wrap items-center gap-2">			<Avatar size="sm">				<AvatarImage src="https://github.com/Maqed.png" alt="@0xMaqed" />				<AvatarFallback>Mqd</AvatarFallback>			</Avatar>			<Avatar>				<AvatarImage src="https://github.com/Maqed.png" alt="@0xMaqed" />				<AvatarFallback>Mqd</AvatarFallback>			</Avatar>			<Avatar size="lg">				<AvatarImage src="https://github.com/Maqed.png" alt="@0xMaqed" />				<AvatarFallback>Mqd</AvatarFallback>			</Avatar>		</div>	);}

You can use the Avatar component as a trigger for a dropdown menu.

"use client";
import {	Avatar,	AvatarFallback,	AvatarImage,} from "@/components/ui/avatar";import { Button } from "@/components/ui/button";import {	DropdownMenu,	DropdownMenuContent,	DropdownMenuGroup,	DropdownMenuItem,	DropdownMenuSeparator,	DropdownMenuTrigger,} from "@/components/ui/dropdown-menu";
export function AvatarDropdown() {	return (		<DropdownMenu>			<DropdownMenuTrigger				render={<Button variant="ghost" size="icon" className="rounded-full" />}			>				<Avatar>					<AvatarImage src="https://github.com/Maqed.png" alt="0xMaqed" />					<AvatarFallback>Mqd</AvatarFallback>				</Avatar>			</DropdownMenuTrigger>			<DropdownMenuContent className="w-32">				<DropdownMenuGroup>					<DropdownMenuItem>Profile</DropdownMenuItem>					<DropdownMenuItem>Billing</DropdownMenuItem>					<DropdownMenuItem>Settings</DropdownMenuItem>				</DropdownMenuGroup>				<DropdownMenuSeparator />				<DropdownMenuGroup>					<DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>				</DropdownMenuGroup>			</DropdownMenuContent>		</DropdownMenu>	);}

RTL

CNLRMqd

أعضاء الفريق

"use client";
import {	type Translations,	useTranslation,} from "@/components/language-selector";import {	Avatar,	AvatarFallback,	AvatarGroup,	AvatarGroupCount,	AvatarImage,} from "@/components/ui/avatar";
const translations: Translations = {	en: {		dir: "ltr",		values: {			teamLabel: "Team members",		},	},	ar: {		dir: "rtl",		values: {			teamLabel: "أعضاء الفريق",		},	},	he: {		dir: "rtl",		values: {			teamLabel: "חברי הצוות",		},	},};
export function AvatarRtl() {	const { dir, language, t } = useTranslation(translations, "ar");
	return (		<div className="flex items-center gap-3" lang={language} dir={dir}>			<AvatarGroup>				<Avatar>					<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />					<AvatarFallback>CN</AvatarFallback>				</Avatar>				<Avatar>					<AvatarImage						src="https://github.com/maxleiter.png"						alt="@maxleiter"					/>					<AvatarFallback>LR</AvatarFallback>				</Avatar>				<Avatar>					<AvatarImage src="https://github.com/Maqed.png" alt="@0xMaqed" />					<AvatarFallback>Mqd</AvatarFallback>				</Avatar>				<AvatarGroupCount>+3</AvatarGroupCount>			</AvatarGroup>			<span className="text-muted-foreground text-sm">{t.teamLabel}</span>		</div>	);}

API Reference

Avatar

The Avatar component is the root component that wraps the avatar image and fallback.

Prop	Type	Default
size	`"default" \| "sm" \| "lg"`	`"default"`

AvatarBadge

The AvatarBadge component displays a badge indicator on the avatar.

Prop	Type	Default
variant	`"default" \| "primary" \| "success" \| "warning" \| "destructive"`	`"default"`

position	`"bottom-end" \| "bottom-start" \| "top-end" \| "top-start"`	`"bottom-end"`

For more information about Base UI Avatar props, see the Base UI documentation.