Member List

Install

pnpm exec vegastack-design verify member-list

pnpm dlx shadcn@4.21.0 add @vegastack/member-list

Usage

import { MemberList, MemberListAdd } from "@/components/ui/member-list";
import { PeoplePicker } from "@/components/ui/people-picker";

<MemberList
  add={
    <MemberListAdd
      picker={
        <PeoplePicker
          multiple
          value={chosen}
          onValueChange={setChosen}
          search={searchPeople}
        />
      }
      roles={ROLES}
      role={role}
      onRoleChange={setRole}
      onAdd={addChosen}
      disabled={chosen.length === 0}
    />
  }
  members={members}
  roles={ROLES}
  onRoleChange={changeRole}
  onRemove={removeMember}
/>;

One list for every "people in X": a team's members, a space's members, who an item is shared with, an invite list. MemberListAdd on top is the picker, an optional role for the new members (a bordered PermissionMenu that lines up with the picker) and Add. Each row is 36px: the PersonAvatar, the name over a muted sub line ("2 people" for a team, "Creator"), the role as a chip menu, and a ⋯ menu with Remove. After maxRows (eight) the list scrolls inside itself. Data-agnostic: rows, roles and every string come in through props and every change goes out through a callback. ShareDialog is built on it.

Scope

• Owns: the add row's layout, the rows, the role chip and ⋯ menus, locked rows, the loading and empty states, the scroll cap.
• Does not own: searching people (the picker is the host's), what a role means, or saving.
• Compose with: PeoplePicker in the add row; a DropdownMenuItem per extra row action through menuItems.

Anatomy

Examples

Add, change, remove

A built-in row (the owner, the creator) is locked: its role shows with a lock and lockedReason in a tooltip, and it has no ⋯ — but the ⋯ column keeps its width on every row, so the role chips line up. you adds "(you)" after the viewer's name. Narrower than 28rem, the add row puts the role and Add under the picker.

Read-only

canManage={false} shows every role as text and drops the menus. Without roles, a row's role is plain text — a team's "Lead" and "Member", say.

Long lists and more actions

Past maxRows the rows scroll inside the list (a whole number of 36px rows tall). menuItems adds the host's own items to a row's ⋯ menu, above Remove — "Resend invite" for an invited person; removable: false keeps a row's menu without Remove.

API Reference

MemberList

Each row of members:

MemberListAdd

Accessibility

• The rows are a list named by labels.list ("Members"); a loading list is aria-busy.
• Every role menu is named for its row with the visible role in it ("Priya Shah's role: Can view"), and every ⋯ button for its row ("More for Priya Shah").
• A locked role is still a tab stop, with its reason read out and shown in a tooltip.
• The sub line is its own line of text, read after the name.

Do / Don't