Avatar

A round picture of a person, with initials on the macOS contact gradient as a fallback.

@cupertinoui/avatarBase UI Avatar Registry JSON

John AppleseedApple Account

MALATA

"use client"

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

export default function AvatarDemo() {
  return (
    <div className="flex items-center gap-4">
      <Avatar className="size-[38px]">
        <AvatarFallback className="text-[15px]">JA</AvatarFallback>
      </Avatar>
      <div className="flex flex-col">
        <span className="font-semibold">John Appleseed</span>
        <span className="text-mac-subheadline text-mac-label-secondary">Apple Account</span>
      </div>
      <div className="flex -space-x-1.5">
        {["MA", "LA", "TA"].map((initials) => (
          <Avatar key={initials} className="size-[22px] ring-2 ring-mac-window">
            <AvatarFallback className="text-[9px]">{initials}</AvatarFallback>
          </Avatar>
        ))}
      </div>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/avatar

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<Avatar>
  <AvatarImage src="/john.jpg" alt="John Appleseed" />
  <AvatarFallback>JA</AvatarFallback>
</Avatar>

API Reference

Every part forwards the props of the underlying Base UI Avatar part. The props below are the ones CupertinoUI adds or changes.

Avatar / AvatarImage / AvatarFallback

Prop	Type	Description
`className`	`string`	Extra classes, merged with the component's own.