Avatar
An image element with a fallback, for representing a user or entity. Built on Base UI's avatar primitive.
Last updated January 1, 1980
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
Installation
Usage
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>
)
}Examples
Size
Badge
Use AvatarBadge to overlay a status indicator, such as an online dot.
Group
Use AvatarGroup and AvatarGroupCount to stack multiple avatars with an overflow count.
RTL
The badge position and group overlap direction both flip correctly under RTL.