Component

Avatar

Render identity images or initials with fixed size tokens, fallback color, and slotted image support.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Avatar } from "@chitrank2050/monoline-ui/avatar"

Basic usage

<Avatar size="md" src="/avatar.jpg" alt="Chitrank Agnihotri" />

<Avatar size="lg">
  <Avatar.Image asChild>
    <Image
      src="/avatar.jpg"
      alt="Chitrank Agnihotri"
      fill
      sizes="56px"
    />
  </Avatar.Image>
</Avatar>

<Avatar size="lg">CA</Avatar>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Avatar works well for a small person or account image that can fall back to initials or custom content.

Avoid when

The media needs a caption, responsive art direction, or a shape other than a circle.

Accessibility

With src present, Avatar uses an img. Give an identifying portrait meaningful alt text; use an empty alt when it is decorative.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

sizeinherit | xs | sm | md | lg | xl | 2xlAvatar scale

srcstring?Optional image URL

altstring?Image alt text when src is provided

Avatar.Imagecompound slotUse asChild for next/image or another image primitive

childrenReactNodeFallback initials or custom content

Design tokens

Theme variables this component reads for color, spacing, and motion.

--avatar-fromCSS varFallback gradient start

--avatar-toCSS varFallback gradient end

--border-strongCSS varAvatar outline colour

Implementation

The source used by the example above, including any state it needs.

import { Avatar } from "@chitrank2050/monoline-ui/avatar"
import Image from "next/image"

export function People() {
  return (
    <div className="flex items-center gap-3">
      <Avatar size="lg">
        <Avatar.Image asChild>
          <Image
            src="/avatar.jpg"
            alt="Chitrank Agnihotri"
            fill
            sizes="56px"
          />
        </Avatar.Image>
      </Avatar>
      <Avatar size="sm">CA</Avatar>
      <Avatar size="md">SC</Avatar>
      <Avatar size="lg">RM</Avatar>
    </div>
  )
}

Compare related components or review the package and theme setup.

01ComponentTestimonialComponent · ReferenceReference→02ComponentCardComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview