Avatar

TLMKJS

Installation

Install the dependencies:

npm install @base-ui/react

Copy the source into components/ui/avatar.tsx. Registry items that depend on it install it automatically.

components/ui/avatar.tsx

Usage

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

export function Example() {
  return (
    <Avatar>
      <AvatarImage src="/avatar.png" alt="Ada" />
      <AvatarFallback>AD</AvatarFallback>
    </Avatar>
  );
}

Examples

Sizes

SMMDLG

Status badge

AvatarBadge pins a marker to the rim; give it a background to carry the status.

ONAW

API Reference

Avatar

Wraps Base UI's Avatar root.

AvatarProps

size : "sm" | "default" | "lg" = "default": 24, 32, or 40 pixels.

Parts

Part	Description
`AvatarImage`	The image, shown once it loads.
`AvatarFallback`	Initials or an icon while the image is missing.
`AvatarBadge`	A status marker pinned to the rim.
`AvatarGroup`	Overlapping stack of avatars.
`AvatarGroupCount`	Overflow count that closes a group.