---
title: Avatar
description: A component that displays a user avatar, supporting images or initials with customizable styling
---

```tsx
'use client';

import { Avatar } from '@/ui/Avatar';
import { Icon } from '@clubmed/trident-icons';

export function AvatarDemo() {
  return (
    <div>
      Avatar using text:
      <Avatar alt="John Doe" />
      Avatar using image:
      <Avatar alt="John Doe" src="https://randomuser.me/api/portraits/men/75.jpg" />
      Avatar using icon:
      <Avatar alt="John Doe">
        <Icon name="PeopleSingle" width="24px" />
      </Avatar>
    </div>
  );
}
```

## Installation

Using the CLI:

```bash
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/avatar.json
```

Or manually, copy the following code into `/ui/avatar.tsx`:

```tsx
import type { HTMLAttributes, PropsWithChildren } from 'react';
import clsx from 'clsx';

const initial = (text = '') => {
  return text
    .split(' ')
    .map((text) => text.slice(0, 1))
    .join('');
};

export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
  alt?: string;
  src?: string | undefined;
  srcSet?: string | undefined;
}

export function Avatar({
  alt,
  src,
  srcSet,
  style,
  children,
  className,
  ...props
}: PropsWithChildren<AvatarProps>) {
  return (
    <div
      {...props}
      {...(src || srcSet ? { role: 'figure', 'aria-label': alt } : {})}
      className={clsx(
        'flex items-center justify-center relative overflow-hidden outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',
        {
          'rounded-full': !className?.includes('rounded-'),
          'text-black': !className?.includes('text-'),
          'bg-saffron': !className?.includes('bg-'),
        },
        className,
      )}
      style={{
        width: '48px',
        height: '48px',
        ...style,
      }}
    >
      <span className="flex items-center justify-center font-bold uppercase text-h6 h-full">
        {src || srcSet ? (
          <img
            srcSet={srcSet}
            src={src}
            alt={alt}
            className={'w-full h-full object-cover transparent indent-[1000px]'}
          />
        ) : (
          initial(alt)
        )}
        {children}
      </span>
    </div>
  );
}
```

## Usage

```tsx showLineNumbers
import Avatar from '@/docs/lib/ui/avatar';

export function Component() {
  return <Avatar alt="John Doe" src="/path/to/image.jpg" />;
}
```

## API Reference

### Avatar

| Prop        | Type                  | Default                             | Description                                                                         |
| ----------- | --------------------- | ----------------------------------- | ----------------------------------------------------------------------------------- |
| `alt`       | `string`              | `undefined`                         | Alt text for the image, or text used to generate initials when no image is provided |
| `src`       | `string \| undefined` | `undefined`                         | The source URL for the avatar image                                                 |
| `srcSet`    | `string \| undefined` | `undefined`                         | The srcSet attribute for responsive images                                          |
| `className` | `string`              | `undefined`                         | Additional CSS classes. Defaults include rounded-full, text-black, and bg-saffron   |
| `style`     | `CSSProperties`       | `{ width: "48px", height: "48px" }` | Custom inline styles. Default size is 48x48 pixels                                  |
| `children`  | `ReactNode`           | `undefined`                         | Optional children elements to overlay on the avatar                                 |

## Notes