# Avatar

> User representation with image, initials fallback, grouping, and status indicator.

- Available in: `@sisyphos-ui/react`, `@sisyphos-ui/vue`, `@sisyphos-ui/angular`
- Docs: https://sisyphosui.com/docs/components/avatar

## Installation

Pick the framework binding that matches your stack:

```bash
pnpm add @sisyphos-ui/react   # React 18+
pnpm add @sisyphos-ui/vue     # Vue 3+
pnpm add @sisyphos-ui/angular # Angular 17+
```

## Import

```tsx
import "@sisyphos-ui/react/styles.css";
import { Avatar } from "@sisyphos-ui/react";
```

## Framework usage

### React 18+

```tsx
import { Avatar } from "@sisyphos-ui/react";

export const Profile = () => <Avatar name="Volkan Günay" color="primary" />;
```

### Vue 3+

```vue
<script setup lang="ts">
import { Avatar } from "@sisyphos-ui/vue";
</script>

<template>
  <Avatar name="Volkan Günay" color="primary" />
</template>
```

### Angular 17+

```ts
import { Component } from "@angular/core";
import { Avatar } from "@sisyphos-ui/angular";

@Component({
  selector: "app-profile",
  standalone: true,
  imports: [Avatar],
  template: `<sui-avatar name="Volkan Günay" color="primary" />`,
})
export class ProfileComponent {}
```

## Examples

### Default

```tsx
import { Avatar } from "@sisyphos-ui/react";

export function Example() {
  return (
    <div className="flex items-center gap-4">
      <Avatar src="https://i.pravatar.cc/100?img=1" alt="Ada" />
      <Avatar name="Linus Torvalds" />
      <Avatar name="Grace Hopper" color="success" />
      <Avatar name="Alan Turing"  color="info"    shape="rounded" />
      <Avatar name="Hedy Lamarr"  color="warning" shape="square" />
    </div>
  );
}
```

### Avatar group

Stack avatars and collapse overflow into a `+N` chip.

```tsx
import { Avatar, AvatarGroup } from "@sisyphos-ui/react";

export function Example() {
  return (
    <AvatarGroup max={3}>
      <Avatar src="https://i.pravatar.cc/100?img=2" alt="A" />
      <Avatar src="https://i.pravatar.cc/100?img=3" alt="B" />
      <Avatar src="https://i.pravatar.cc/100?img=4" alt="C" />
      <Avatar name="Dora" />
      <Avatar name="Eva"  />
      <Avatar name="Frida" />
    </AvatarGroup>
  );
}
```

<!-- exports: { "Avatar": "@sisyphos-ui/react" } -->