Avatar

An image element with a text fallback. The image resolves in with a gentle fade — no layout shift, no flash of the fallback.

CNSU

tsx

import { Avatar, AvatarFallback, AvatarImage } from "@/registry/seam/ui/avatar"

export default function AvatarDemo() {
  return (
    <div className="flex items-center gap-3">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>SU</AvatarFallback>
      </Avatar>
    </div>
  )
}

bunx --bun @seamui/cli@latest add avatar

Notes

The image fades in with fades.normal once it loads — the fallback shows instantly in the meantime, so a resolving photo never pops.
Always provide an alt on AvatarImage and a meaningful AvatarFallback (initials) for when the image fails or is still loading.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.