# Avatar (/media/avatar)





<ComponentPreview name="avatar-preskok-demo" description="Avatars with images and initials, different sizes and shapes." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/avatar
```

## Usage [#usage]

```tsx
import { Avatar } from "@/components/ui/preskok-ui/avatar"

export function AvatarDemo() {
  return (
    <div className="flex gap-4">
      <Avatar src="/avatars/01.png" alt="Alex Johnson" />
      <Avatar initials="AJ" alt="Alex Johnson" />
      <Avatar initials="JR" alt="Jamie Rivera" isSquare size="lg" />
    </div>
  )
}
```

## Props [#props]

| Prop        | Type                                   | Default | Description               |
| ----------- | -------------------------------------- | ------- | ------------------------- |
| `src`       | `string \| null`                       | `null`  | Image source              |
| `initials`  | `string`                               | -       | Initials fallback         |
| `alt`       | `string`                               | `""`    | Accessible alt text       |
| `isSquare`  | `boolean`                              | `false` | Square vs. circular shape |
| `size`      | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"`  | Avatar size               |
| `className` | `string`                               | -       | Additional CSS classes    |