Avatar

A visual representation of a user or entity.

Installation

Implement this component in your project using Yumma CSS and Base UI.

pnpm add @base-ui/react

Examples

Basic

import { Avatar } from "@base-ui/react/avatar";

export default function ExampleAvatar() {
  return (
    <Avatar.Root className="d-if d-12 ai-c jc-c br-pill o-h bg-silver-1 us-none va-m">
      <Avatar.Image
        src="https://i.pravatar.cc/64?img=12"
        alt="Marcus Webb"
        className="d-full of-c"
      />
      <Avatar.Fallback className="d-f ai-c jc-c d-full fs-md fw-500 c-slate-9">
        MW
      </Avatar.Fallback>
    </Avatar.Root>
  );
}

API Reference

Check out the Base UI documentation for more information.