<OrganizationSwitcher /> component
The <OrganizationSwitcher /> component allows a user to switch between their joined organizations. If personal accounts are enabled, users can also switch to their personal account. This component is useful for applications that have a multi-tenant architecture, where users can be part of multiple organizations. It handles all organization-related flows, including full organization management for admins. Learn more about organizations.
import { OrganizationSwitcher } from '@clerk/react-router'
export default function OrganizationSwitcherPage() {
return <OrganizationSwitcher />
}Properties
The <OrganizationSwitcher /> component accepts the following properties, all of which are optional:
- Name
afterCreateOrganizationUrl- Type
string- Description
The full URL or path to navigate to after creating a new organization.
- Name
afterLeaveOrganizationUrl- Type
string- Description
The full URL or path to navigate to after the user leaves the currently .
- Name
afterSelectOrganizationUrl- Type
string- Description
The full URL or path to navigate to after a successful organization switch.
- Name
appearance- Type
Appearance | undefined- Description
Optional object to style your components. Will only affect Clerk components and not Account Portal pages.
- Name
createOrganizationMode- Type
'modal' | 'navigation'- Description
A boolean that 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
createOrganizationUrlwhere<CreateOrganization />is mounted as a page. Defaults to:'modal'.
- Name
createOrganizationUrl- Type
string- Description
The full URL or path where the
<CreateOrganization />]createorg-ref component is mounted.
- Name
defaultOpen- Type
boolean- Description
A boolean that controls the default state of the
<OrganizationSwitcher />component.
- Name
fallback?- Type
ReactNode- Description
An optional element to be rendered while the component is mounting.
- Name
hidePersonal- Type
boolean- Description
A boolean that controls whether
<OrganizationSwitcher />will include the user's personal account in the organization list. Setting this totruewill hide the personal account option, and users will only be able to switch between organizations. Defaults tofalse.
- Name
hideSlug- Type
boolean- Description
A boolean that controls whether the optional slug field in the organization creation screen is hidden.
- Name
organizationProfileMode- Type
'modal' | 'navigation'- Description
A boolean that 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
organizationProfileUrlwhere<OrganizationProfile />is mounted as a page. Defaults to:'modal'.
- Name
organizationProfileProps- Type
object- Description
Specify options for the underlying <OrganizationProfile /> component. For example:
{appearance: {...}}
- Name
organizationProfileUrl- Type
string- Description
The full URL or path where the <OrganizationProfile /> component is mounted.
Customization
To learn about how to customize Clerk components, see the customization documentation.
Feedback
Last updated on