> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Avatar

> User avatar with image and fallback.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/avatar-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=2192d8849f6c0b7a9acde91617941966" alt="Avatar component preview (light)" width="240" data-path="images/ui/avatar-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/avatar.tsx`

## When to use

* Display user or entity images with a built‑in fallback (initials/icon).
* Use in lists, headers, comments, or profile menus.

## Usage

```tsx sabo/src/components/ui/avatar.tsx theme={null}
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Avatar>
        <AvatarImage src="/users/jane.jpg" alt="Jane Cooper" />
        <AvatarFallback>JC</AvatarFallback>
      </Avatar>
      <span>Jane Cooper</span>
    </div>
  );
}
```

## Key props

<ParamField path="AvatarImage.src" type="string">
  Image URL. If it fails to load, the fallback is shown.
</ParamField>

<ParamField path="AvatarImage.alt" type="string">
  Accessible alternative text describing the user/image.
</ParamField>

<ParamField path="className" type="string">
  Use Tailwind to change size (<code>size-6</code>, <code>size-10</code>), ring, or border.
</ParamField>

<Note>
  This component forwards all props from Radix Avatar primitives (Root/Image/Fallback). Above are commonly used props. For the full API, see Radix docs: [https://www.radix-ui.com/primitives/docs/components/avatar](https://www.radix-ui.com/primitives/docs/components/avatar)
</Note>

## Styling tip

* Add a ring: <code>className="ring-2 ring-primary"</code> on <code>Avatar</code>.
* Use aspect‑square containers; <code>Avatar</code> is circular by default.

## Accessibility

* Always set meaningful <code>alt</code> on <code>AvatarImage</code>.
* Provide visible labels nearby for context (name/role).