Avatar Group

A data display component that groups multiple avatars together with overlapping or formatting.

Vertical Orientation

Set the orientation prop to vertical to change the orientation of the component.

Customizing

globals.css


:root {
  --ex-avatar-group-gap-x: calc(var(--spacing) * -3);
  --ex-avatar-group-gap-y: calc(var(--spacing) * -3);
 
  --ex-avatar-group-ring-width: 3px;
}

API

Element	Selector
`Avatar`	`.ex-avatar-group`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`orientation`	`enum of ["horizontal", "vertical"]`	`horizontal`