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 https://herocn.dev/r/avatar.json

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.