Avatar
User or brand image with a text fallback when the image fails to load. Use AvatarGroup (same registry entry) to stack several for team or reviewer lists.
Live preview
open in new tab ↗"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { Avatar as AvatarPrimitive } from "radix-ui"
function Avatar({ className, ...props }) {
return (
<AvatarPrimitive.Root
data-slot="avatar"
className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
{...props}
/>
)
}
function AvatarImage({ className, ...props }) {
return <AvatarPrimitive.Image data-slot="avatar-image" className={cn("aspect-square size-full", className)} {...props} />
}
function AvatarFallback({ className, ...props }) {
return (
<AvatarPrimitive.Fallback
data-slot="avatar-fallback"
className={cn("flex size-full items-center justify-center rounded-full bg-muted text-sm", className)}
{...props}
/>
)
}
export { Avatar, AvatarImage, AvatarFallback }Block id: shadcn-avatarreact-tailwind · drop-in
More composite blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.