Avatar group

Free

A compact stack of avatars with an overflow count and presence.

Installs components/ui/avatar-group.tsxDepends on none beyond ReactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/avatar-group.json

When to use #

Use it for

Showing who is on a project or in a conversation.
Space is tight.

Skip it when

Names matter more than faces; list them.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/avatar-group.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { AvatarGroup } from "@/components/ui/avatar-group"

export function ProjectTeam() {
  return (
    <AvatarGroup
      label="Project team"
      max={3}
      members={[
        { name: "Mara Chen", status: "online" },
        { name: "Noor Haddad" },
        { name: "Ivo Petrov", status: "online" },
        { name: "Sana Okafor" },
        { name: "Tomas Berg" },
      ]}
    />
  );
}

API reference #

AvatarGroup

component

PropTypeDefault

members *readonly AvatarGroupMember[]—

maxnumber4

labelstring"Team members"

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.