Layout UI

Avatar

User avatar with image, fallback initials, and graceful error handling. Built on Base UI Avatar.

Preview

CNRX

Installation

bash
npx shadcn@latest add @layout/avatar

Usage

tsx
import { Avatar, AvatarImage, AvatarFallback } from "@/registry/layout/avatar/avatar";

Examples

Fallback initials

JDABMK

Avatar stack

JDABMKPQ

Guidelines for AI agents

Wrap AvatarImage and AvatarFallback inside Avatar. AvatarFallback renders automatically when the image fails to load or no src is provided. Use initials (one or two characters) as the fallback child. Stack avatars with -space-x-* and ring-background to create groups.

Never

  • Neverdisplay an avatar without AvatarFallback; image loading failures must not produce a blank circle
  • Neverhardcode background colours on AvatarFallback; it inherits bg-muted from the token contract
  • Neverscale Avatar below size-6; initials become illegible at smaller sizes
  • Neveruse Avatar to display generic icons that are not user identity; use a Badge or Icon component instead

Tokens consumed

--layout-muted--layout-muted-fg--layout-radius