The people on a thing, overlapped: who is in a conversation, who shares a list.
Import it from rei-kit:
import { AvatarStack } from 'rei-kit'
Open AvatarStack 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 { AvatarStack } from 'rei-kit'
const people = [
{ name: 'Aiko Tanaka' },
{ name: 'Kenji Mori' },
{ name: 'Mei Lin' },
{ name: 'Ravi Patel' },
{ name: 'Sara Yilmaz' },
]
</script>
<template>
<AvatarStack :people="people" :max="3" label="Shared with 5 people" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
people | readonly { name: string; src?: string | undefined }[] | yes | Each person's name, and a picture where there is one. |
label | string | yes | The stack's accessible name: "Shared with 6 people". Already translated. |
max | number | 4 | How many faces before the rest become a number. |
size | 'sm' | 'md' | 'lg' | 'md' |
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.