Avatar
An image element with a text fallback for representing a user or entity.
Installation
$
Usage
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"Examples
Default
Image with a text fallback, plus an optional status dot.
MDUI
SC
Sizes
Resize with size-* utilities; bump the fallback text to match.
MDMDMDMD
Group
Overlap with -space-x-2 and a ring-background outline; cap with a +N tile.
MDSCUI+3
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| srcAvatarImage | string | - | Image source URL. The image only renders once it has loaded; the fallback shows until then. |
| onLoadingStatusChangeAvatarImage | (status: "idle" | "loading" | "loaded" | "error") => void | - | Called when the image's loading status changes. |
| delayMsAvatarFallback | number | - | Delay in milliseconds before the fallback renders, avoiding a flash when the image loads quickly. |
"use client"
import * as React from "react"
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
import { cn } from "@/registry/lib/utils"
function Avatar({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
return (
<AvatarPrimitive.Root
data-slot="avatar"
className={cn(
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
className
)}
{...props}
/>
)
}
function AvatarImage({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
return (
<AvatarPrimitive.Image
data-slot="avatar-image"
className={cn("aspect-square size-full", className)}
{...props}
/>
)
}
function AvatarFallback({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
return (
<AvatarPrimitive.Fallback
data-slot="avatar-fallback"
className={cn(
"bg-neutral-200 text-muted-foreground dark:bg-neutral-800 flex size-full items-center justify-center rounded-full text-xs font-medium",
className
)}
{...props}
/>
)
}
export { Avatar, AvatarImage, AvatarFallback }