Components · Avatar
Avatar Group
StableSince v0.0.1
Stacked group of avatars with overflow count.
import { AvatarGroup } from '@nexub/react';Examples
Default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| max | number | 4 | Maximum number of avatars shown before an overflow count is rendered. |
| size | 'xs' | 'sm' | 'md' | 'lg' | — | Controls avatar dimensions for all children. |
| spacing | 'tight' | 'normal' | 'normal' | Controls the overlap amount between stacked avatars. |
On iOS & Android: AvatarGroup
@nexub/react-nativeAlpha
import { AvatarGroup } from '@nexub/react-native';
<AvatarGroup max={3}>{people.map((p) => <Avatar key={p.id} name={p.name} />)}</AvatarGroup>Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
AvatarGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactElement<AvatarProps>[] | — | — |
| max | number | 4 | Avatars shown before "+N". |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | — | — |