---
url: "https://vueda.dev/v3/reference/theming/keys/UserAvatar.md"
title: "UserAvatar"
---

# UserAvatar

Source: `client/lib/theme/vueda-tailwind/display/index.js`

> Initials chip frame. The component supplies size inline from its size prop, while tone selects the primary or sidebar color recipe.

Vue component: [UserAvatar](/v3/reference/api/vue/UserAvatar.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/UserAvatar.md#theme-key-UserAvatar-root) | callback | Initials chip frame. The component supplies size inline from its size prop, while tone selects the primary or sidebar color recipe. |
| [initials](/v3/reference/theming/keys/UserAvatar.md#theme-key-UserAvatar-initials) | `font-semibold uppercase leading-none tabular-nums` | Uppercase initials text with stable numeric glyphs. |

<a id="theme-key-UserAvatar-root"></a>

## root

> Initials chip frame. The component supplies size inline from its size prop, while tone selects the primary or sidebar color recipe.

Callback:

```javascript
({ tone }) => ({
            class: [
                "relative inline-flex shrink-0 items-center justify-center overflow-hidden",
                "rounded-full select-none",
                {
                    "border border-primary bg-[color-mix(in_oklab,var(--primary)_14%,transparent)] text-primary-text":
                        !tone || tone === "primary",
                    "bg-sidebar-accent text-sidebar-foreground": tone === "sidebar",
                },
            ],
        })
```

Source: `client/lib/theme/vueda-tailwind/display/UserAvatar.theme.js:18`

<a id="theme-key-UserAvatar-initials"></a>

## initials

> Uppercase initials text with stable numeric glyphs.

Default classes:

`font-semibold uppercase leading-none tabular-nums`

Source: `client/lib/theme/vueda-tailwind/display/UserAvatar.theme.js:30`