UsersAvatarGroup

pro

UsersAvatarGroup turns person records into a compact participant stack with image, tooltip, overflow, and click handling.

Get the code

Installation

Add this component with the NateUI CLI.

npx nateui@latest add UsersAvatarGroup

Examples

Overflow

Get the code
+3
Select +3 to show all

Custom Record Keys

Get the code

Avatar And Group Props

Get the code

Avatar Click

Get the code

Selected:Ava Chen

API

UsersAvatarGroup is a record-to-avatar adapter over Avatar.Group. It uses the configured image field for src, the configured name field for each tooltip, and forwards the remaining Avatar.Group props.

PropDescriptionTypeDefault
usersString-keyed user records rendered as avatars.UserRecord[][]
imgKeyUser-record field passed to the Avatar src prop.string'img'
nameKeyUser-record field shown in each Avatar tooltip.string'name'
avatarPropsProps applied to every generated Avatar after the wrapper defaults.AvatarProps{}
avatarGroupPropsAvatar.Group props applied before direct group props.AvatarGroupProps{}
onAvatarClickCalled with the clicked user record.UserAvatarClickHandler-
chainedOverlaps the avatars into a stack.booleantrue
maxCountVisible-avatar limit before the generated +N avatar appears.number4
...AvatarGroupPropsDirect Avatar.Group props, such as className, omittedAvatarContent, and onOmittedAvatarClick. These take priority over the same field in avatarGroupProps.AvatarGroupProps-

Each generated Avatar defaults to shape="circle", size={30}, and a pointer cursor. avatarProps can override those defaults.

Types

import type {
  AvatarGroupProps,
  AvatarProps,
} from '@/components/ui/avatar';
 
type UserRecord = Record<string, string>;
 
type UserAvatarClickHandler = (user: UserRecord) => void;
 
type UsersAvatarGroupProps = AvatarGroupProps & {
  avatarGroupProps?: AvatarGroupProps;
  avatarProps?: AvatarProps;
  imgKey?: string;
  nameKey?: string;
  onAvatarClick?: UserAvatarClickHandler;
  users?: UserRecord[];
};