Overview
Get Started
ZM
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
export function AvatarDemo() {
return (
<Avatar>
<AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
<AvatarFallback>ZM</AvatarFallback>
</Avatar>
);
}Installation
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
import { cn } from "@/lib/cn";
function Avatar({
className,
size = "default",
...props
}: AvatarPrimitive.Root.Props & {
size?: "default" | "sm" | "lg";
}) {
return (
<AvatarPrimitive.Root
data-slot="avatar"
data-size={size}
className={cn(
"group/avatar relative flex size-8 shrink-0 select-none rounded-full after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
className
)}
{...props}
/>
);
}
function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
return (
<AvatarPrimitive.Image
data-slot="avatar-image"
className={cn("aspect-square size-full rounded-full object-cover", className)}
{...props}
/>
);
}
function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
return (
<AvatarPrimitive.Fallback
data-slot="avatar-fallback"
className={cn(
"flex size-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
className
)}
{...props}
/>
);
}
function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
return (
<span
data-slot="avatar-badge"
className={cn(
"absolute right-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background",
"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
className
)}
{...props}
/>
);
}
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="avatar-group"
className={cn(
"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
className
)}
{...props}
/>
);
}
function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="avatar-group-count"
className={cn(
"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
className
)}
{...props}
/>
);
}
export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };Usage
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";<Avatar>
<AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
<AvatarFallback>ZM</AvatarFallback>
</Avatar>Examples
Sizes
ZMZMZM
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
export function AvatarDemo() {
return (
<div className="flex flex-wrap items-center gap-2">
<Avatar size="sm">
<AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
<AvatarFallback>ZM</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
<AvatarFallback>ZM</AvatarFallback>
</Avatar>
<Avatar size="lg">
<AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
<AvatarFallback>ZM</AvatarFallback>
</Avatar>
</div>
);
}With badge
ZM
import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
export function AvatarDemo() {
return (
<Avatar>
<AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
<AvatarFallback>ZM</AvatarFallback>
<AvatarBadge className="bg-green-600 dark:bg-green-500" />
</Avatar>
);
}With badge icon
ZM
import { IconPlus } from "@tabler/icons-react";
import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
export function AvatarDemo() {
return (
<Avatar>
<AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
<AvatarFallback>ZM</AvatarFallback>
<AvatarBadge>
<IconPlus />
</AvatarBadge>
</Avatar>
);
}With group
ZMLSCN
import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from "@/components/ui/avatar";
export function AvatarDemo() {
return (
<AvatarGroup>
<Avatar>
<AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
<AvatarFallback>ZM</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/learnwithsumit.png" alt="Learn with Sumit" />
<AvatarFallback>LS</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</AvatarGroup>
);
}With group and count
ZMLSCN
+3
import {
Avatar,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarImage,
} from "@/components/ui/avatar";
export function AvatarDemo() {
return (
<AvatarGroup>
<Avatar>
<AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
<AvatarFallback>ZM</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/learnwithsumit.png" alt="Learn with Sumit" />
<AvatarFallback>LS</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>
);
}With Next.js Image
ZM
import Image from "next/image";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
export function AvatarDemo() {
return (
<Avatar>
<AvatarImage
src="https://github.com/zbmzubayer.png"
alt="ZBM Zubayer"
render={
<Image src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" width={40} height={40} />
}
/>
<AvatarFallback>ZM</AvatarFallback>
</Avatar>
);
}API Reference
Avatar props
Component type props
Prop
Type
Default
Expand prop details
The size of the avatar.
Type
'sm' | 'default' | 'lg'Default
'default'