Team Members List Block React component
A workspace members list for settings pages: a seats meter, search, an invite form that turns typed or pasted emails into chips and flags bad ones, role selects that protect the last owner, pending invites with Resend, 2FA badges, last-active status and remove with an inline confirmation.
About the Team Members List Block component
Team Members List Block is the people page of a workspace's settings. It shows everyone with their role, whether they have two-factor authentication, when they were last active and how many paid seats are used, with pending invites listed alongside members.
Inviting is quick: paste a list of emails and they become chips, with mistakes and existing members flagged before anything is sent. Roles change from a select, invites can be resent, and removing someone asks for confirmation right in the row. The last owner and your own account are protected.
When to use it
Use it in team or workspace settings of a SaaS app, an admin panel or a client portal with several users per account.
Pair it with the Billing Summary Card so people can add seats when the invite form says none are left.
Installation
Add the Team Members List Block component to your project with the shadcn CLI. It lands in components/team-members-list.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/team-members-listOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<TeamMembersList /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Team members" |
| members | TeamMember[] | — |
| seats | number | 10 |
| currentUserId Id of the person viewing (cannot remove themselves). | string | "m1" |
| onInvite | (emails: string[], role: Role) => void | — |
| onRoleChange | (id: string, role: Role) => void | — |
| onRemove | (id: string) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Team members"
- membersTeamMember[]
- seatsnumberDefault: 10
- currentUserId
Id of the person viewing (cannot remove themselves).
stringDefault: "m1" - onInvite(emails: string[], role: Role) => void
- onRoleChange(id: string, role: Role) => void
- onRemove(id: string) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Team Members List Block FAQ
- How do people paste a list of emails?
- Paste anywhere in the field and the text is split on spaces, commas and semicolons into chips. Invalid addresses and existing members turn red and are skipped when sending.
- What stops someone locking everyone out?
- The last active Owner cannot change role or be removed, and you cannot remove yourself. Both controls are disabled with a tooltip that explains why.
- Do invites use seats?
- Yes. Active and invited people count; suspended members don't. Invites beyond the free seats are not sent and the form says so.
- Is anything saved?
- Changes are kept in state and reported through onInvite, onRoleChange and onRemove so you can call your API.
- Is it accessible?
- Every role select has a label naming the person, the seats meter is a progressbar, icon buttons have names, the remove confirmation is an alertdialog that focuses Cancel and changes are announced in a polite live region.
