Avatar

Composition preview

Try Avatar alongside its related data & surfaces components. These examples keep all actions local.

Usage

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

<>
<Avatar>
  <AvatarImage src="/profile.jpg" alt="Profile" />
  <AvatarFallback>JP</AvatarFallback>
</Avatar>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

AvatarImage src/alt, AvatarFallback; size

Usage & accessibility

Always provide a fallback. Channel logos and provider-specific previews remain product compositions.

Implementation contract

src/components/ui/avatar.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.