Atoms / Avatar

Avatar

<Avatar />Stable

Round identity surface. A photo (AvatarImage), or a color-coded fallback with initials or an icon (AvatarFallback) shown while the image is missing or loading. One `size` knob scales the diameter, initials, and icon glyph together so it stays balanced at any scale; `color` picks an identity color from the palette by name (not a semantic status tone) — a soft tint (default) or a solid fill.

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

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Size

Color

Appearance

Content

MR
<Avatar size="lg" color="cobalt">
  <AvatarFallback>MR</AvatarFallback>
</Avatar>

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

Preview

MR

Code

import { Avatar } from "@/components/upnext";


<Avatar />

Palette

The fallback takes any identity color from the palette — by NAME (cobalt, teal, magenta, …), never a semantic status tone, because an avatar isn't 'success' or 'error'. Each color comes in a soft tint (default) or a solid fill; initials or an icon inherit it. When an AvatarImage loads, it covers the fallback. neutral is the gray default.

MRMRTBJCESAKDPLRNKMWBTCGRHJLPMSDVKFOGWHTDB
{/* soft is the default appearance — color by NAME, not a status tone */}
<Avatar color="cobalt"><AvatarFallback>MW</AvatarFallback></Avatar>
<Avatar color="teal"><AvatarFallback>RH</AvatarFallback></Avatar>
<Avatar color="magenta"><AvatarFallback>DP</AvatarFallback></Avatar>

Composition

One size knob scales everything in proportion, plus status badges, stacked groups, and a real athlete-row usage.

MRMRMRMRMR
{/* one knob — the initials AND the icon scale with it, so both stay
   optically balanced at every size (xs 24 · sm 32 · md 40 · lg 56 · xl 80) */}
<Avatar size="xs">…</Avatar>
<Avatar size="sm">…</Avatar>
<Avatar size="md">…</Avatar>  {/* default */}
<Avatar size="lg">…</Avatar>
<Avatar size="xl">…</Avatar>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.