Team membersPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/team-members

• Markdown: https://ui.xzero.co.uk/components/blocks/team-members/markdown

• Access: Xzero Pro

• Registry id: team-members

• Source file: registry/blocks/team-members/team-members.tsx

• Built from: Avatar, Button, Search field, Text morph, Animated counter

• Keywords: react team members, invite team members, member management, user roles table, invite by email, seat management, workspace members

Use this on the team or workspace settings page of a SaaS app. Load members, invites, and seat limits from your API and connect role changes, Send invite, Resend, Revoke, and Remove to it; every invite and removal in the preview is simulated.

When to use

• The team or workspace settings page of a SaaS app.
• Inviting several people at once by typing or pasting emails.
• Member lists with roles, pending invites, and seat counts.

When not to use

• Use team-directory for a browsable people directory.
• Use roles-permissions to define what each role can do.
• Use tag-input for a general chip input outside invites.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/team-members

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { TeamMembers } from "@/components/xzero/blocks/team-members/team-members";

export default function TeamSettings() {
  return (
    <main>
      <TeamMembers />
    </main>
  );
}

API reference

TeamMembers

A members list with an invite field that turns typed emails into chips, pending invites, role selects, seat counts, and confirm to remove. Members, invites, and seats are simulated.

No props.

Keyboard interactions

Keys	Action
Enter	Turns the typed email into a chip, or sends invites when the field is empty.
, / ; / Space	Commits the typed email as a chip.
Backspace	Removes the last chip when the field is empty.
Escape	Cancels a pending member removal.

Accessibility

• Role selects use Radix select with full keyboard support.
• Invite validation messages sit in a polite live region, and actions are announced in a status region.

Motion

• Email chips fly into the pending invites list and the seat count rolls.
• Rows enter and leave with layout animation.
• Reduced motion makes the flight and reflow instant.

Responsive behavior

• Below 600px container width the header and invite row stack and the search goes full width.
• Below 420px each member row splits into the identity on top and last active, role, and remove underneath.

Performance

• Member rows are not virtualized; add paging for large organizations.
• Rows enter and leave with layout animation, and a ResizeObserver drives the height morph.

Notes for AI

• Use on the team or workspace settings page of a SaaS app.
• Load members, invites, and seat limits from your API and connect role changes, Send invite, Resend, Revoke, and Remove to it.
• Composes Xzero avatar, button, search-field, text-morph, and animated-counter.

Related

• Team directory: Searchable people, team filters, and a focused profile panel.
• Roles and permissions: A permissions matrix with group toggles that ripple, role duplication and a review bar.
• Tag input: Turn short text values into removable tags.
• Settings page: Account settings with a gliding section nav and a save bar that morphs in as you edit.
• Avatar: A compact identity marker for people and accounts.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt