Item Group for React

Whenever several rows form one list. ItemGroup stacks them with a gap that follows their size and gives the block the list role, which is why each row here has role="listitem". A single row on its own doesn't need a group.

ItemSeparator is a horizontal Separator with a little vertical margin. Render it between rows, skipping the last index, so the list doesn't end with a stray rule. For rows that already have borders, as in the outline variant, you can drop the separators and rely on the group's gap.

Each pass of the loop renders two siblings, the Item and its separator, keyed by the username, with no element wrapped around them. An extra wrapper would sit between the list and its items and break the layout. A Fragment carries the key without adding anything to the DOM.

One small action per row works best, like the icon button here. Use the icon-md size, pill for a round shape and the ghost variant so the buttons don't outweigh the names. An icon-only button needs an aria-label that names the row, such as Invite haydenbleasel.

Yes: matching media keeps titles lined up down the list. If a person has no picture, AvatarFallback shows the first letter of the username in the same size, so the row still lines up.

The group is announced as a list and each row as a list item, so people hear how many entries there are. Each button's aria-label names its person, so moving from button to button doesn't just repeat Invite.