# Avatar

> A person or account as an image that shows a skeleton while it loads and falls back to one or two initials on a colour fixed by the name, as a circle or a rounded square.

- Package: `fancy-ui-vue` (Vue 3.5+ + Tailwind CSS v4)
- Category: Data Display
- Tags: avatar, profile, user, initials, image, fallback
- Types: `AvatarProps`, `AvatarSize`, `AvatarShape`
- Docs: https://fancy-ui.rama.app/docs/components/avatar
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/vue/src/components/avatar

## Import

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

Setup (once per project): `npm install fancy-ui-vue`, then put these lines in your main CSS file (the stylesheet imports go right after `@import "tailwindcss";`):

```css
@import "tailwindcss";
@import "fancy-ui-vue/tailwind.css";
@import "fancy-ui-vue/styles.css";
```

Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in a Vue template; when one differs from the Svelte name, the Svelte name follows in parentheses. Snippets become named slots (`#default` is the default snippet), a prop the Vue port declares as a model is a `v-model:<name>` (except `ref`, exposed via `defineExpose({ ref })`: put a template ref on the component and read `.ref`) and callbacks are listeners (`onclick` is `@click`). Every component sets `inheritAttrs: false`: `class` is a declared prop, merged where the Svelte component applies it (not always the root element), and only when the props table below lists it; other attributes do not fall through unless the package README lists the component as forwarding native attributes. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/vue#divergences-from-the-svelte-api

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | — | Image URL. While it loads a skeleton shows; if it fails the initials show |
| `alt` | `string` | — | The accessible name, and the one required decision whenever src is set: describe the image, or pass "" to mark the avatar decorative beside a visible name. Falls back to name |
| `name` | `string` | — | Who this is. Gives one or two initials for the fallback and a colour that is always the same for the same name |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Diameter: 28, 36 or 64px |
| `shape` | `"circle" \| "square"` | `"circle"` | Fully round, or a rounded square |
| `class` | `string` | — | Additional CSS classes |

## Example

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

// A self-contained image, so the example needs no network.
const portrait = `data:image/svg+xml,${encodeURIComponent(
	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f59e0b"/><stop offset="1" stop-color="#db2777"/></linearGradient></defs><rect width="64" height="64" fill="url(#g)"/><circle cx="32" cy="26" r="11" fill="#fff" fill-opacity=".85"/><path d="M10 64c2-14 12-20 22-20s20 6 22 20z" fill="#fff" fill-opacity=".85"/></svg>'
)}`;
</script>

<template>
	<div class="flex flex-wrap items-center gap-4">
		<Avatar :src="portrait" alt="Maya Okafor" name="Maya Okafor" />
		<Avatar name="Lena Fischer" />
		<Avatar name="Tomás Rivera" shape="square" />
		<Avatar name="Aiko Tanaka" size="lg" />
	</div>
</template>
```