Astryx Avatar Group

Component

About

AvatarGroup displays multiple avatars in an overlapping row with an optional overflow indicator, from Meta's Astryx design system. Uses a compositional API: pass Avatar children directly so each avatar can carry its own props (status dots, click handlers, etc.). Includes AvatarGroupOverflow for +N counts or custom overflow content.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Avatar Group to your project and fits it to your theme.

Code

How Astryx Avatar Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import AvatarGroup, {
  AvatarGroupOverflow,
} from '@/components/ui/astryx-avatar-group';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Avatar} from '@astryxdesign/core/Avatar';
import {Stack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';

const USERS = [
  {
    name: 'Alex Daniels',
  },
  {
    name: 'Ann Smith',
  },
  {
    name: 'Carol Davis',
  },
];

export default function AvatarGroupOverflowShowcase() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Stack direction="vertical" gap={8}>
          <Stack direction="vertical" gap={3}>
            <Text type="supporting" color="secondary">
              Default overflow
            </Text>
            <AvatarGroup size="medium">
              {USERS.map(user => (
                <Avatar key={user.name} name={user.name} />
              ))}
              <AvatarGroupOverflow count={5} />
            </AvatarGroup>
          </Stack>
          <Stack direction="vertical" gap={3}>
            <Text type="supporting" color="secondary">
              Custom count text
            </Text>
            <AvatarGroup size="medium">
              {USERS.slice(0, 2).map(user => (
                <Avatar key={user.name} name={user.name} />
              ))}
              <AvatarGroupOverflow count={12}>12+</AvatarGroupOverflow>
            </AvatarGroup>
          </Stack>
        </Stack>
      </div>
    </Theme>
  );
}