Member List

Team member management component with role badges, status indicators, and full action capabilities including role changes, removal, and invite resending.

Preview

Features

Card layout with avatar, name, email, role and status badges
Role badges: Owner (amber), Admin (red), Member (blue), Viewer (gray)
Status badges with icons: Active (green), Invited (amber), Inactive (gray)
Joined date and last active time display
Dropdown actions: View profile, Change role, Resend invite, Remove
Change role submenu with all available roles
Owner protection (cannot change role or remove owner)
Resend invite only shown for invited members
Loading skeleton and empty state
Invite button in header

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
member-list.tsx	components/user-management/member-list/member-list.tsx
member-card.tsx	components/user-management/member-list/member-card.tsx
types.ts	components/user-management/member-list/types.ts
index.ts	components/user-management/member-list/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add button badge avatar

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. member-list.tsx

member-list.tsx

tsx

"use client";

import { UsersThree as Users, UserPlus } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";

2. member-card.tsx

member-card.tsx

tsx

"use client";

import type { ElementType } from "react";
import {
  Crown,

3. types.ts

types.ts

tsx

export type MemberRole = "owner" | "admin" | "member" | "viewer";
export type MemberStatus = "active" | "invited" | "inactive";

export interface Member {
  id: string;

4. index.ts

index.ts

tsx

export { MemberList } from "./member-list";
export { MemberCard } from "./member-card";
export type {
  Member,
  MemberRole,
  MemberStatus,
  MemberListProps,
  MemberCardProps,
} from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/team.tsx

tsx

"use client";

import { useState } from "react";
import { MemberList, type Member } from "@/components/user-management";

MemberList Props

Prop	Type	Default
members	Member[]	required
currentUserRole	MemberRole	-
onChangeRole	(memberId: string, newRole: MemberRole) => void \| Promise	-
onRemove	(memberId: string) => void \| Promise	-
onResendInvite	(memberId: string) => void \| Promise	-
onViewProfile	(memberId: string) => void	-
onInvite	() => void	-
isLoading	boolean	false
className	string	-