Avatar
An image element with a fallback, for representing a user or entity. Built on Base UI's avatar primitive.
Last updated August 8, 2026
CreditsModifiedPublished
Copied from shadcn/ui.
- Replaced physical right-0 with logical end-0 on AvatarBadge for RTL
- Added rtl:space-x-reverse to AvatarGroup so overlap direction flips correctly under RTL
Overview
CN
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function AvatarDemoExample() {
return (
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
)
}Installation
$ npx shadcn@latest add https://ui.persian-labs.ir/r/avatar.jsonUsage
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function Example() {
return (
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
)
}Size
CNCNCN
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function AvatarSizeExample() {
return (
<div className="flex items-center gap-4">
<Avatar size="sm">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar size="default">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar size="lg">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</div>
)
}Badge
Use AvatarBadge to overlay a status indicator, such as an online dot.
CN
import {
Avatar,
AvatarBadge,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function AvatarBadgeExample() {
return (
<Avatar size="lg">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
<AvatarBadge className="bg-emerald-500" />
</Avatar>
)
}Group
Use AvatarGroup and AvatarGroupCount to stack multiple avatars with an overflow count.
CNLRVC
+3
import {
Avatar,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
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/leerob.png" alt="@leerob" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/vercel.png" alt="@vercel" />
<AvatarFallback>VC</AvatarFallback>
</Avatar>
<AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>
)
}RTL
The badge position and group overlap direction both flip correctly under RTL.
کا
ک۱ک۲ک۳
+۳
import {
Avatar,
AvatarBadge,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarImage,
} from "@/components/ui/avatar"
export function AvatarRtlExample() {
return (
<div className="flex flex-col items-center gap-6">
<Avatar size="lg">
<AvatarImage src="https://github.com/shadcn.png" alt="کاربر" />
<AvatarFallback>کا</AvatarFallback>
<AvatarBadge className="bg-emerald-500" />
</Avatar>
<AvatarGroup>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="کاربر یک" />
<AvatarFallback>ک۱</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/leerob.png" alt="کاربر دو" />
<AvatarFallback>ک۲</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/vercel.png" alt="کاربر سه" />
<AvatarFallback>ک۳</AvatarFallback>
</Avatar>
<AvatarGroupCount>+۳</AvatarGroupCount>
</AvatarGroup>
</div>
)
}