Avatar Group

Usage

Use it to:

• show who is on a page, project or thread at a glance

Don’t use it to:

• a full member list (use a list with names)

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { Avatar, AvatarGroup } from '@krackedui/motion';

export function Collaborators() {
  return (
    <AvatarGroup max={3}>
      <Avatar name="Ada Lovelace" />
      <Avatar name="Grace Hopper" />
      <Avatar name="Linus Torvalds" />
      <Avatar name="Margaret Hamilton" />
      <Avatar name="Alan Turing" />
    </AvatarGroup>
  );
}

Examples

Size

Workspaces

Children default to the circular user shape; set shape to keep squares.

Dark theme

API Reference

AvatarGroup

A <div role="group">; supports all of its props. Adds:

Accessibility

• A group; each avatar is an image named after its person, and the chip is named “N more”.
• Add aria-label to the group (“Collaborators”) when its purpose is not clear from context.