Team membersPro

• Seat usage
• Invite many by email
• Role changes
• Resend and remove

• Workspace or organization settings.

• Public team pages: use profile cards.

Import it from @/components/blocks/team-members after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

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

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <TeamMembers />
    </main>
  );
}

• Role selects and menus are labelled with the member's name.

• Invited members slide in; removed ones collapse.

• Member rows become two lines on phones.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• Check seat limits on the server before sending invites.