DOM Studio

Component

Vue Avatar Stack Component

<DomAvatarStack>

A grouped identity primitive for collaborators, assignees, reviewers, and participants.

Playground

Try every prop live

Avatar stack playground

Adjust the props to explore sizing, content, and behaviour.

+1
Playground.vuevue
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomAvatarStack } from '@getdom/studio';

const data = reactive({
		"items": [
			{
				"name": "Mina Patel",
				"initials": "MP",
				"src": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&crop=faces&w=96&h=96&q=80"
			},
			{
				"name": "Ari Chen",
				"initials": "AC",
				"src": "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&crop=faces&w=96&h=96&q=80"
			},
			{
				"name": "Noah Kim",
				"initials": "NK",
				"src": "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?auto=format&fit=crop&crop=faces&w=96&h=96&q=80"
			},
			{
				"name": "Leah Stone",
				"initials": "LS",
				"src": "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&crop=faces&w=96&h=96&q=80"
			},
			{
				"name": "Theo Grant",
				"initials": "TG",
				"src": "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&crop=faces&w=96&h=96&q=80"
			}
		],
		"max": 4,
		"size": "sm",
		"label": "Participants"
	});
</script>

<template>
	<DomAvatarStack
		v-bind="data"
	/>
</template>

Reference

Props

Control props

NameTypeTSDefaultDescription
items
ts
[
	{
		name: "Ada Lovelace",
		src: "https://...",
		initials: "AL",
	}
]
arrayArray<ItemsItem
type ItemsItem = {
	name?: string; // Name
	src?: string; // Image URL
	initials?: string; // Initials
};
>		[]People, teams, or workspace records.
maxnumbernumber4Maximum avatars to show before the overflow count.
size'xs' | 'sm' | 'md' | 'lg'string'sm'Avatar size.
labelstringstring'Participants'Accessible label for the stack.

Auto-generated from Avatar stack.props and inline _edit hints.

Slots

NameScopeDescription
#avatar{ item, index }Custom avatar rendering for each visible item.