Avatar

A user's profile picture, with initials as a fallback.

KM

import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'

// A plain inline SVG, so the demo has a working image with no network dependency.
const PHOTO =
  'data:image/svg+xml,' +
  encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect width="64" height="64" fill="#c2410c"/><circle cx="32" cy="26" r="12" fill="#fdf4f1"/><ellipse cx="32" cy="60" rx="20" ry="16" fill="#fdf4f1"/></svg>',
  )

export default function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage src={PHOTO} alt="A studio avatar" />
      <AvatarFallback>KM</AvatarFallback>
    </Avatar>
  )
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/avatar.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Avatar imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'

<Avatar>
  <AvatarImage src="/user.png" alt="@username" />
  <AvatarFallback>KM</AvatarFallback>
</Avatar>

Examples

Image fails to load

KM

import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'

export default function AvatarFallbackExample() {
  return (
    <Avatar>
      <AvatarImage src="data:image/png;base64,broken" alt="" />
      <AvatarFallback>KM</AvatarFallback>
    </Avatar>
  )
}

API Reference

Name	Type	Default	Description
AvatarImage src / alt	string	—	The image to load. Falls back automatically if it errors or is omitted.
AvatarFallback delay	number	0	Milliseconds to wait before showing the fallback, to avoid a flash while the image loads.