Avatar

Copyimport { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
// With image + fallback
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>
 
// Fallback only
<Avatar>
  <AvatarFallback>NS</AvatarFallback>
</Avatar>
 
// Custom size
<Avatar className="size-12">
  <AvatarImage src={user.avatarUrl} alt={user.name} />
  <AvatarFallback>{user.initials}</AvatarFallback>
</Avatar>

Copy# Mint — Avatar Specs
 
## Component
- name: avatar
- file: registry/mint/avatar.tsx
- installs to: components/ui/avatar.tsx
- dependencies: radix-ui
 
## What is it
A circular image container for representing a user or entity. Falls back to
initials or any ReactNode when the image is unavailable or fails to load.
Use it in navigation bars, comment threads, user lists, and anywhere a
person's identity needs a visual anchor.
 
## Visual identity
Minimal. A rounded-full container — no border, no shadow — that keeps the
focus on the image or initials. The fallback uses bg-muted with centered
text in a small font-medium weight.
 
## Design tokens
--muted: oklch(0.96 0.02 155)             — fallback background
--muted-foreground: oklch(0.52 0.06 155) — fallback text color
 
## Dark theme
--muted: oklch(0.2 0.03 155)
--muted-foreground: oklch(0.6 0.06 155)
 
## Anatomy
<Avatar>                  ← Root: rounded-full container, size-8 by default
  <AvatarImage />         ← Radix image: aspect-square size-full
  <AvatarFallback />      ← Shows when image missing/failed: flex centered, text-xs font-medium
</Avatar>
 
## States
- image loaded:  AvatarImage fills the container, AvatarFallback hidden
- image failed / no src:  AvatarFallback renders automatically
- delayMs:  pass to AvatarFallback to avoid fallback flash during fast loads
 
## Conventions
- Always include AvatarFallback — even with a known src, network errors happen
- Use 1–2 character initials in the fallback (e.g. "NS", "AB")
- For grouped avatars: add border-2 border-background and -space-x-2 on the parent
- Do not use square avatars — keep rounded-full unless explicitly redesigning
- Default size is size-8 (32px); override with Tailwind size utilities