Avatar

An avatar component for displaying user images with fallback to initials.

Import

import { Avatar } from '@/components/ui';

Basic Usage

<Avatar src="/user-photo.jpg" name="John Doe" />

Props

Prop Type Default Description
src string - Image URL
name string - User name (for alt text and initials)
size 'sm' | 'md' | 'lg' | 'xl' 'md' Avatar size
alt string - Alt text (defaults to name)
className string - Additional CSS classes

Sizes

<Avatar src="/photo.jpg" name="John" size="sm" />  {/* 32x32px */}
<Avatar src="/photo.jpg" name="John" size="md" />  {/* 40x40px (default) */}
<Avatar src="/photo.jpg" name="John" size="lg" />  {/* 48x48px */}
<Avatar src="/photo.jpg" name="John" size="xl" />  {/* 64x64px */}

Fallback to Initials

When no image is provided, displays initials:

<Avatar name="John Doe" />      {/* Shows "JD" */}
<Avatar name="Alice" />         {/* Shows "AL" */}
<Avatar name="Bob Wilson Jr" /> {/* Shows "BW" */}

No Name Fallback

When neither image nor name is provided:

<Avatar />  {/* Shows "?" */}

User Profile Example

import { Avatar, Card } from '@/components/ui';

export function UserProfile({ user }) {
  return (
    <Card className="p-4">
      <div className="flex items-center gap-4">
        <Avatar
          src={user.avatar}
          name={user.name}
          size="lg"
        />
        <div>
          <h3 className="font-semibold">{user.name}</h3>
          <p className="text-sm text-zinc-500">{user.email}</p>
        </div>
      </div>
    </Card>
  );
}

Avatar Group

const users = [
  { name: 'John Doe', avatar: '/john.jpg' },
  { name: 'Jane Smith', avatar: '/jane.jpg' },
  { name: 'Bob Wilson' },
];

export function AvatarGroup({ users }) {
  return (
    <div className="flex -space-x-2">
      {users.map((user, i) => (
        <Avatar
          key={i}
          src={user.avatar}
          name={user.name}
          size="sm"
          className="ring-2 ring-white dark:ring-zinc-900"
        />
      ))}
    </div>
  );
}

In Table

<TableRow>
  <TableCell>
    <div className="flex items-center gap-3">
      <Avatar src={user.avatar} name={user.name} size="sm" />
      <div>
        <p className="font-medium">{user.name}</p>
        <p className="text-sm text-zinc-500">{user.email}</p>
      </div>
    </div>
  </TableCell>
</TableRow>

With Badge

<div className="relative inline-block">
  <Avatar src={user.avatar} name={user.name} />
  <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 ring-2 ring-white" />
</div>

Styling