# Avatar

A user picture with an initials fallback.

Group: Basics

## Import

```tsx
import { Avatar } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function AvatarDemo() {
  return (
    <HStack gap="3">
      <Avatar.Root size="sm">
        <Avatar.Fallback name="Indoku Bot" />
      </Avatar.Root>
      <Avatar.Root size="md">
        <Avatar.Image src="https://i.pravatar.cc/100?img=12" alt="User" />
        <Avatar.Fallback name="User" />
      </Avatar.Root>
      <Avatar.Root size="lg">
        <Avatar.Fallback name="Ken99" />
      </Avatar.Root>
    </HStack>
  )
}
```