Components / Blocks / WorkspaceTeamManager

WorkspaceTeamManager.

ProBlockTeamsv0.1.0

A team-management surface with member rows, explicit roles, protected owner actions and an invitation form. You supply persistence and authorization; the block never imports an auth or organization SDK.

Get Elements Pro

Demo dataResponsive

People in Acme Workspace

3 people have access to this workspace.

Dan Schoonmaker

dan@example.com

Sarah Chen

sarah@example.com

James Park

Invited

james@example.com

Invite a teammate

Send workspace access with an explicit starting role.

Installation

Add the licensed registry once. Keep your license key in the project’s uncommitted environment.

components.json

{
  "registries": {
    "@elements-pro": {
      "headers": {
        "Authorization": "Bearer ${ELEMENTS_PRO_LICENSE_KEY}"
      },
      "url": "https://pro.elements.micropreneur.dev/r/{name}.json"
    }
  }
}

export ELEMENTS_PRO_LICENSE_KEY=mpro_...

pnpm dlx shadcn@latest add @elements-pro/workspace-team-manager

The shadcn CLI writes the source into your project. Files added:

components/elements-pro/workspace-team-manager.tsxblock
components/ui/button.tsxui
components/ui/badge.tsxui
components/ui/card.tsxui
components/ui/input.tsxui
components/ui/native-select.tsxui

Dependencies@base-ui/reactclass-variance-authorityclsxlucide-reacttailwind-merge

API

Prop	Type	Default	Description
workspaceName (required)	string	—	Shown in the card heading.
members (required)	WorkspaceMember[]	—	Current members and pending invitations.
currentUserId	string	—	Marks the signed-in member and protects their own row.
onInvite	(email, role) => void \| Promise<void>	—	Sends an invitation. The form shows pending and sent states.
onRoleChange	(memberId, role) => void	—	Called when a role changes. Enforce it on the server.
onRemove	(memberId) => void	—	Called when a member is removed. Enforce it on the server.

WorkspaceMember

Prop	Type	Default
id (required)	string	—
name (required)	string	—
email (required)	string	—
initials (required)	string	—
role (required)	'owner' \| 'admin' \| 'member' \| 'viewer'	—
status	'active' \| 'invited'	—

Accessibility

Each role select and remove button is labelled with the member’s name.
Invitation fields have visible labels, and the sent confirmation is announced politely.