Stacked avatars with an overflow count.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/avatar-group
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { AvatarGroup } from "@/components/nextui/avatar-group";23export function Collaborators() {4return (5<AvatarGroup6people={[7{ initials: "MT", name: "John Doe", src: "/avatars/minh.png" },8{ initials: "AC", name: "Ava Chen" },9{ initials: "SL", name: "Sam Lee" },10]}11moreLabel="+4"12caption="7 people editing"13/>14);15}
| Prop | Type | Default | Description |
|---|---|---|---|
| people | AvatarGroupItem[] | AN, BT, CL, DH, EV | Avatars to show: initials, optional src and name |
| moreLabel | string | null | "+12" | Label on the last highlighted avatar; null hides it |
| caption | ReactNode | "17 teammates online" | Text beside the group |
| className | string | – | Extra classes on the wrapper |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.