The person, in the corner where the account lives.
Import it from rei-kit:
import { BaseAvatar } from 'rei-kit'
Open BaseAvatar in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { BaseAvatar } from 'rei-kit'
</script>
<template>
<BaseAvatar name="Aiko Tanaka" fallback="initials" size="lg" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
name | string | '' | Used for the initials and, failing a `label`, as the accessible name. |
src | string | '' | |
size | 'sm' | 'md' | 'lg' | 'md' | |
fallback | 'figure' | 'initials' | 'figure' | |
label | string | '' | Overrides the accessible name. For "Your account" rather than a person's name. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.