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 React Aria.

Installation

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

pnpm exec frontfriend download avatar-group -f react --primitive aria

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

Usage

import { AvatarGroup } from "@/components/ui/avatar-group";
const list = [
  { fallback: "Ada" },
  { fallback: "Linus" },
  { fallback: "Grace" },
  { fallback: "Ken" },
  { fallback: "Margaret" },
  { fallback: "Alan" },
];
<AvatarGroup max={3} list={list} tooltip />;

Props API

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

Examples

Default

import { AvatarGroup } from "@/components/ui/avatar-group";
const list = [
  { fallback: "Ada" },
  { fallback: "Linus" },
  { fallback: "Grace" },
  { fallback: "Ken" },
  { fallback: "Margaret" },
  { fallback: "Alan" },
];
<AvatarGroup
  
  list={list.slice(0, 4)}
  max={undefined}
/>;

Sizes

import { AvatarGroup } 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, className: "h-6 w-6" }));
const largeList = list.map((item) => ({ ...item, className: "h-12 w-12" }));
<div className="flex items-center gap-6">
  <AvatarGroup list={smallList.slice(0, 3)} counterClasses="h-6 w-6" />
  <AvatarGroup list={list.slice(0, 3)} />
  <AvatarGroup list={largeList.slice(0, 3)} counterClasses="h-12 w-12" />
</div>;

Overflow

import { AvatarGroup } from "@/components/ui/avatar-group";
const list = [
  { fallback: "Ada" },
  { fallback: "Linus" },
  { fallback: "Grace" },
  { fallback: "Ken" },
  { fallback: "Margaret" },
  { fallback: "Alan" },
];
<AvatarGroup list={list} max={3} />;

Without Tooltip

import { AvatarGroup } from "@/components/ui/avatar-group";
const list = [
  { fallback: "Ada" },
  { fallback: "Linus" },
  { fallback: "Grace" },
  { fallback: "Ken" },
  { fallback: "Margaret" },
  { fallback: "Alan" },
];
<AvatarGroup list={list} max={4} tooltip={false} />;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Prop	Type	Default	Description
`counterClasses`	`string`	`—`	Optional string
`list`	`AvatarListItem[]`	`—`	Required AvatarListItem[]
`max`	`number`	`—`	Optional number
`tooltip`	`boolean`	`true`	Optional boolean

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