`<OrganizationSwitcher />`

The <OrganizationSwitcher /> component is used to enable the ability to switch between available organizations the user may be part of in your application.

Usage

/app/organization-switcher/[[...organization-switcher]]/page.[jsx/tsx]
import { OrganizationSwitcher } from "@clerk/nextjs";
 
export default function OrganizationSwitcherPage() {
  return (
    <div>
      <OrganizationSwitcher />
    </div>
  );
}

/pages/organization-switcher/[[...index]].[jsx/tsx]
import { OrganizationSwitcher } from "@clerk/nextjs";
 
export default function OrganizationSwitcherPage() {
  return (
    <div>
      <OrganizationSwitcher />
    </div>
  );
}

organization-switcher.tsx
import { OrganizationSwitcher } from "@clerk/clerk-react";
 
export default function OrganizationSwitcherPage() {
  return (
    <div>
      <OrganizationSwitcher />
    </div>
  );
}

/pages/organization-switcher/$.tsx
import { OrganizationSwitcher } from "@clerk/remix";
 
export default function OrganizationSwitcherPage() {
  return (
    <div>
      <OrganizationSwitcher />
    </div>
  );
}

Properties

All props below are optional.

Name	Type	Description
`afterCreateOrganizationUrl`	`string`	Full URL or path to navigate after creating a new organization.
`appearance`	`Appearance \| undefined`	Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
`createOrganizationUrl`	`string`	Full URL or path where the `<CreateOrganization />` component is mounted.
`organizationProfileUrl`	`string`	Full URL or path where the `<OrganizationProfile />` component is mounted.
`createOrganizationMode`	`'modal' \| 'navigation'`	Controls whether clicking the "Create organization" button will cause the `<CreateOrganization />` component to open as a modal, or if the browser will navigate to the `createOrganizationUrl` where `<CreateOrganization />` is mounted as a page. Defaults to: `'modal'`.
`organizationProfileMode`	`'modal' \| 'navigation'`	Controls whether clicking the "Manage organization" button will cause the `<OrganizationProfile />` component to open as a modal, or if the browser will navigate to the `organizationProfileUrl` where `<OrganizationProfile />` is mounted as a page. Defaults to: `'modal'`.
`afterLeaveOrganizationUrl`	`string`	Full URL or path to navigate to after the user leaves the currently active organization.
`afterSwitchOrganizationUrl`	`string`	Full URL or path to navigate after a successful organization switch.
`hidePersonal`	`boolean`	By default, users can switch between organizations and their personal workspace. This option controls whether `<OrganizationSwitcher />` will include the user's personal workspace in the organization list. Setting this to `true` will hide the personal workspace entry, and allow users to switch only between organizations. Defaults to: `false`.
`defaultOpen`	`boolean`	Controls the default state of the `<OrganizationSwitcher />` component.
`organizationProfileProps`	`object`	Specify options for the underlying `<OrganizationProfile />` component. e.g. `{appearance: {...}}`

Customization

To learn about how to customize Clerk components, see the customization documentation.

Last updated on November 21, 2023