Wocha Docs

OrgSwitcher

Organisation switcher with multi-org support and profile modal/navigation.

The <OrgSwitcher> component lets signed-in users switch between organisations. It shows a dropdown of memberships and supports opening the organisation profile in modal or navigation mode.

Installation

pnpm add @wocha/ui @wocha/react
Or scaffold with the CLI
npx @wocha/cli init --framework nextjs
import { OrgSwitcher } from "@wocha/ui";
import "@wocha/ui/styles.css";

Basic usage

<OrgSwitcher
  getOrgLabel={(id) => orgNames[id] ?? id}
  createOrganisationUrl="/organisations/new"
  showSingle
/>

Props

PropTypeDefaultDescription
getOrgLabel(orgId: string) => string—Resolve organisation IDs to display labels
createOrganisationUrlstring—URL for creating a new organisation
onCreateOrganisation() => void—Called when the user selects "Create organisation"
organisationProfileMode"modal" | "navigation""modal"How the organisation profile opens
organisationProfileUrlstring—Destination when organisationProfileMode is "navigation"
appearanceWochaAppearance—Visual customisation
classNamestring—Additional class name
showSinglebooleanfalseShow switcher even when user has only one organisation
fallbackReactNode—Shown while auth context is loading
// Opens OrganizationProfile in a modal overlay
<OrgSwitcher organisationProfileMode="modal" />
 
// Navigates to a dedicated settings page
<OrgSwitcher
  organisationProfileMode="navigation"
  organisationProfileUrl="/settings/organisation"
/>

Theming

import { corporate } from "@wocha/ui/themes";
 
<WochaThemeProvider appearance={{ theme: corporate, orgSwitcher: { radius: "sm" } }}>
  <OrgSwitcher showSingle />
</WochaThemeProvider>

Framework notes

FrameworkNotes
React SPAPlace in sidebar or header; requires multi-org user (orgIds on session)
Next.jsClient component; pair with OrganisationProfile page for navigation mode

Previous

OrganizationProfile

Next

CreateOrganization

On this page