Components

<OrgSwitcher/>

Let an actor move between the organisations they belong to, create new ones, and jump into delegated admin, all from a single control.

<OrgSwitcher/>renders the actor’s organisation memberships and lets them set the active organisation for the session. Changing the active organisation updates the session context, so every OrthID hook and any token your app issues afterwards is scoped to the newly selected organisation.

Organisations are one of OrthID’s three actors. The switcher is how a human moves between the organisation contexts they have access to.

Usage

Import it from @orthid/react and place it in your app shell, often next to <UserButton/>.

components/AppHeader.tsx

import { OrgSwitcher, UserButton } from "@orthid/react";

export function AppHeader() {
  return (
    <header className="app-header">
      <Logo />
      <OrgSwitcher afterSwitchUrl="/dashboard" />
      <UserButton afterSignOutUrl="/" />
    </header>
  );
}

Read the active organisation anywhere with the useOrganization() hook, which re-renders when the actor switches.

Read the active org

import { useOrganization } from "@orthid/react";

function Dashboard() {
  const { organization } = useOrganization();
  return <h1>{organization?.name ?? "Personal"}</h1>;
}

Personal account

By default the switcher includes a personal context alongside the actor’s organisations, so they can work outside any organisation. Set hidePersonal to require an organisation at all times, which suits B2B products where every action belongs to a tenant.

Require an organisation

<OrgSwitcher hidePersonal afterSwitchUrl="/dashboard" />

Create-org flow

When createOrgEnabled is on, the switcher shows a Create organisation action that opens an inline flow to name the new organisation and provision it. The creating actor becomes its first admin and the active organisation switches to it on success. Under the hood this calls orthid.organizations.createin the actor’s region.

Enable create-org

<OrgSwitcher createOrgEnabled afterSwitchUrl="/onboarding" />

Delegated admin

For organisations where the actor is an admin, the switcher exposes a Manage organisation entry. This opens delegated admin for that organisation: invite and remove members, assign roles, and configure org-level settings, all without leaving your app. What an admin can do is governed by their roles and permissions.

Theming

The appearance prop accepts design tokens and per-element overrides, matching the rest of the component kit.

Theming

<OrgSwitcher
  appearance={{
    tokens: { colorPrimary: "#004a99", borderRadius: "12px" },
    elements: { trigger: "rounded-xl border border-slate-200" },
  }}
/>

Switching changes token scope

Setting the active organisation rewrites the organisation claim in the session. Tokens minted before the switch keep their original scope until they expire, so trigger any in-flight requests after the switch completes.

Props

Prop	Type	Default	Description
`appearance`	`AppearanceConfig`	-	Theme the trigger and menu with design tokens and per-element class overrides.
`hidePersonal`	`boolean`	false	Hide the personal context so the actor must always operate inside an organisation.
`afterSwitchUrl`	`string`	-	URL to navigate to after the active organisation changes. Must be allowlisted for the tenant.
`createOrgEnabled`	`boolean`	false	Show the create-organisation action and inline provisioning flow.

Next steps

The three actors - humans, organisations and agents.
RBAC & permissions - what each org role can do.