Avatar Group — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download avatar-group -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { AvatarGroup } from "@/components/ui/avatar-group";
import * as UI from "@/components/ui/avatar-group";

const Component = UI.AvatarGroup;

const args = {
  "max": 3,
  "list": [
      { fallback: "Alex", src: "" },
      { fallback: "Sam", src: "" },
      { fallback: "Jo", src: "" },
      { fallback: "Lee", src: "" },
  ],
  "tooltip": true,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <AvatarGroup v-bind="args" />
</template>

Props API

Prop	Type	Required
`max`	`number`	No
`tooltip`	`boolean`	No
`counterClasses`	`string`	No
`list`	`AvatarListItem[]`	Yes

Examples

Default

<script setup lang="ts">
import { AvatarGroup } from "@/components/ui/avatar-group";
import * as UI from "@/components/ui/avatar-group";

const list = [
  { fallback: "Ada" },
  { fallback: "Linus" },
  { fallback: "Grace" },
  { fallback: "Ken" },
  { fallback: "Margaret" },
  { fallback: "Alan" },
];

const Component = UI.AvatarGroup;

const args = {
  "max": 4,
  "list": list,
  "tooltip": true,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const exampleList = list.slice(0, 4);
</script>

<template>
  <AvatarGroup :list="exampleList" />
</template>

Sizes

<script setup lang="ts">
import { AvatarGroup } from "@/components/ui/avatar-group";
import * as UI from "@/components/ui/avatar-group";

const list = [
  { fallback: "Ada" },
  { fallback: "Linus" },
  { fallback: "Grace" },
  { fallback: "Ken" },
  { fallback: "Margaret" },
  { fallback: "Alan" },
];

const smallList = list.map((item) => ({ ...item, class: "h-6 w-6" }));

const largeList = list.map((item) => ({ ...item, class: "h-12 w-12" }));

const Component = UI.AvatarGroup;

const args = {
  "max": 4,
  "list": list,
  "tooltip": true,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const exampleSmallList = smallList.slice(0, 3);
const midList = list.slice(0, 3);
const exampleLargeList = largeList.slice(0, 3);
</script>

<template>
  <div class="flex items-center gap-6">
    <AvatarGroup
      :list="exampleSmallList"
      counterClasses="h-6 w-6"
    /><AvatarGroup :list="midList" /><AvatarGroup
      :list="exampleLargeList"
      counterClasses="h-12 w-12"
    />
  </div>
</template>

Overflow

<script setup lang="ts">
import { AvatarGroup } from "@/components/ui/avatar-group";
import * as UI from "@/components/ui/avatar-group";

const list = [
  { fallback: "Ada" },
  { fallback: "Linus" },
  { fallback: "Grace" },
  { fallback: "Ken" },
  { fallback: "Margaret" },
  { fallback: "Alan" },
];

const Component = UI.AvatarGroup;

const args = {
  "max": 4,
  "list": list,
  "tooltip": true,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <AvatarGroup :list="list" :max="3" />
</template>

Without Tooltip

<script setup lang="ts">
import { AvatarGroup } from "@/components/ui/avatar-group";
import * as UI from "@/components/ui/avatar-group";

const list = [
  { fallback: "Ada" },
  { fallback: "Linus" },
  { fallback: "Grace" },
  { fallback: "Ken" },
  { fallback: "Margaret" },
  { fallback: "Alan" },
];

const Component = UI.AvatarGroup;

const args = {
  "max": 4,
  "list": list,
  "tooltip": true,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <AvatarGroup :list="list" :max="4" :tooltip="false" />
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

AvatarGroup

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`counterClasses`	`string`	`—`
`list`	`Array<{ src?: string; style?: string; fallback: string; seed?: string; naked?: boolean; class?: string; }>`	`—`
`max`	`number`	`—`
`tooltip`	`boolean`	`—`

AvatarGroupCount

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.