Avatar

An image element with a fallback for representing the user — with optional badge, sizes, and overlapping groups.

Default

Image, fallback, status badge, and overlapping groups.

Installation

CLI

npx @sonojs/ui@latest add avatar

Usage

avatar.tsx

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

export function Example() {
  return (
    <Avatar>
      <AvatarImage src="/images/docs/01.webp" alt="User 1" />
      <AvatarFallback>U1</AvatarFallback>
    </Avatar>
  )
}

Props

Prop	Type	Default	Description
size	"default" · "sm" · "lg"	"default"	Avatar size. Default 32px (size-8), sm 24px, lg 40px.