<OrganizationSwitcher />

Quickly switch between multiple organizations

Overview

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

Embedding an <OrganizationSwitcher /> component

1
import { OrganizationSwitcher } from '@clerk/clerk-react'
2

3
export default function Home() {
4
  return (
5
    <div>
6
        <OrganizationSwitcher />
7
    </div>
8
  )
9
}

Props

Name	Type	Description
afterCreateOrganizationUrl?	string	Full URL or path to navigate after creating a new organization.
afterSwitchOrganizationUrl?	string	Full URL or path to navigate after a successful organization switch.
afterLeaveOrganizationUrl?	string	Full URL or path to navigate to after the user leaves the currently active organization.
appearance?	object	Customization options to fully match the Clerk components to your brand. These options serve as overrides and will be merged with the global `appearance` prop of ClerkProvided (if one is provided)
defaultOpen?	boolean	Controls the default state of the <OrganizationSwitcher/>
organizationProfileMode?	string	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 options: - modal - navigation
organizationProfileUrl?	string	Full URL or path where the <OrganizationProfile /> component is mounted.
hidePersonal?	boolean	By default, users can switch between organization and their personal account. This option controls whether <OrganizationSwitcher/> will include the user's personal account in the organization list. Setting this to `true` will hide the personal account entry, and users will only be able to switch between organizations.
createOrganizationUrl?	string	Full URL or path where the component is mounted.

Custom Styling

The <OrganizationSwitcher/> component can be highly customized through the appearance prop and can be styled using CSS Modules, Tailwind, inline CSS objects, or global CSS.