Avatar Group

Category

Data Display

Built on

Radix Avatar

Platforms

• ReactAvailable
• AngularAvailable· package preview
• SwiftUIComposition
• Jetpack ComposeComposition
• FlutterComposition

›Verification details

What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.

React

Package maturity: stable · Implementation verification: Beta

• Build✓verified
• Interaction—no evidence
• Accessibility✓verified
• RTL—no evidence
• Large text—no evidence
• Visual—no evidence
• Published✓verified

Angular

Package maturity: preview · Implementation verification: Preview

• Build✓verified
• Interaction✓verified
• Accessibility✓verified
• RTL—no evidence
• Large text—no evidence
• Visual—no evidence
• Published✓verified

This platform’s whole catalogue is verified to React beta, Angular preview. The catalogue figure is the weakest component on that platform, not an average.

CLI

npx @kinetixui/cli add avatar-group

Registry

/r/avatar-group.json

A11y

audited in CI →

Stacked, overlapping avatars with a max prop that folds anything past the cap into a +N marker. Gap-fill addition (not in the original Figma source) — composes Avatar / AvatarFallback, so it ships in the same install as those.

Installation#

npx @kinetixui/cli add avatar

Usage#

import { Avatar, AvatarFallback, AvatarGroup } from "@kinetixui/ui";
 
<AvatarGroup max={3}>
  <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>AK</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>MO</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>TL</AvatarFallback></Avatar>
</AvatarGroup>

API#

Everything past max folds into a single +N marker built from the same Avatar/AvatarFallback. Plus all native <div> attributes.

Styled entirely from the KinetixUI token contract — bg-muted, text-muted-foreground, ring-background. Works in light and dark with no extra config — see Accessibility.