<OrganizationSwitcher/> component
<OrganizationSwitcher /> is the umbrella control for organization and workspace switching. It reads the current session, the available memberships, and the deployment permissions before it decides which switch, create, and manage actions to show.
Usage
The following example shows a basic usage of <OrganizationSwitcher />.
export default function Header() { return ( <header className="flex items-center justify-between gap-4 border-b border-border px-6 py-4"> <div className="flex items-center gap-3"> <span className="text-sm font-medium">Wacht</span> <nav className="flex items-center gap-4 text-sm text-muted-foreground"> <a href="/docs">Docs</a> <a href="/docs/sdks/nextjs">Next.js</a> </nav> </div> <OrganizationSwitcher /> </header> );}Overview
Mount it where a user needs to move between personal, organization, and workspace scope without leaving the current page.
It fits well in the app header, sidebar, or any other top-level shell where the active tenancy matters.
What it shows
The switcher uses the active session and the current memberships to build the label shown on the button. For a personal account it shows the personal state; for a scoped session it shows the organization name and, when workspaces are enabled, the active workspace beside it.
The trigger also reflects restrictions when the current org or workspace is blocked or needs attention.
Behavior
The switcher builds its state from the active session, organization memberships, workspace memberships, and deployment B2B settings. That is what lets it keep the current scope, the list of alternatives, and the available actions in sync.
When the button is opened it renders a dropdown with the current personal account, the active organization, the available workspaces, and any permitted create or manage actions. The menu is driven by the current deployment rules, not by a fixed list of controls.
- It can keep a personal account option visible when the deployment allows it.
- The create and manage actions are permission-aware and do not appear for every user.
Scope switching
The current organization stays pinned at the top of the menu, and workspaces are nested beneath it when the deployment has workspaces enabled.
Switching the organization or workspace updates the active session scope and closes the menu once the switch is complete.
- The active organization and active workspace are both read from the current session state.
- The switcher keeps a personal account entry available when personal mode is supported.
Create and manage actions
When the deployment allows it, the switcher can open the organization and workspace create dialogs, plus the manage dialogs for the current organization or workspace.
Those actions are permission-aware. If the user cannot manage the current scope, the corresponding button never appears.
- Create actions are surfaced only when the deployment lets users create new scopes.
- Manage actions are tied to the current membership permissions.
Loading and restrictions
While the organization or workspace data is still loading, the switcher shows a skeleton button instead of a half-populated menu.
If the current organization or workspace is restricted, the switcher keeps the warning state visible and disables the actions that do not make sense in that state.
Examples
Header shell
export default function Header() { return ( <header className="flex items-center justify-between gap-4 border-b border-border px-6 py-4"> <div className="flex items-center gap-3"> <span className="text-sm font-medium">Wacht</span> <nav className="flex items-center gap-4 text-sm text-muted-foreground"> <a href="/docs">Docs</a> <a href="/docs/sdks/nextjs">Next.js</a> </nav> </div> <OrganizationSwitcher /> </header> );}