User & team management

TeamManagementPanel

A drop-in panel for managing team members, team profile, and workspace settings. Renders three tabs: Users, Profile, and Workspace.

Props:

Prop	Type	Default	Description
defaultTab	'users' | 'profile' | 'workspace'	'users'	Which tab is active by default
showProfileTab	boolean	true	Show the profile tab
showWorkspaceTab	boolean	true	Show the workspace tab
onError	(error: Error) => void	(none)	Called on any error
seatsMetric	string	(none)	The plan limit that counts seats, e.g. "seats" (a gauge counted from membership). With it, Invite stops at the plan’s limit and says why; without it, the page does not check seats
tabBar	Snippet<[{ tabs, activeTab, setTab }]>	(none)	Custom tab bar render snippet

Usage:

<!-- src/routes/settings/team/+page.svelte -->
<script lang="ts">
  import { TeamManagementPanel } from '@nebulr-group/bridge-svelte';
</script>

<TeamManagementPanel
  defaultTab="users"
  onError={(err) => console.error(err)}
/>

Custom tab bar:

<TeamManagementPanel>
  {#snippet tabBar({ tabs, activeTab, setTab })}
    <nav class="custom-tabs">
      {#each tabs as tab}
        <button
          class:active={activeTab === tab.id}
          onclick={() => setTab(tab.id)}
        >
          {tab.label}
        </button>
      {/each}
    </nav>
  {/snippet}
</TeamManagementPanel>

The panel includes:

• Users tab: list team members, invite new users, update roles, remove members.
• Profile tab: update team name and other profile fields.
• Workspace tab: update workspace settings.

Individual tab components

Each tab is also exported as a standalone component. Use these when you only need one piece of team management, or want to build your own layout:

<script lang="ts">
  import { TeamUserList, TeamProfileForm, TeamWorkspaceForm } from '@nebulr-group/bridge-svelte';
</script>

<!-- Just the user list -->
<TeamUserList onError={(err) => console.error(err)} />

<!-- Just the profile form -->
<TeamProfileForm onError={(err) => console.error(err)} />

<!-- Just the workspace settings -->
<TeamWorkspaceForm onError={(err) => console.error(err)} />

All three accept class, style, and onError props.