<OrganizationSwitcher /> component
The <OrganizationSwitcher /> component allows a user to switch between their joined Organizations. If , 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.
Example
The following example includes a basic implementation of the <OrganizationSwitcher /> component. You can use this as a starting point for your own implementation.
import { OrganizationSwitcher } from '@clerk/react-router'
export default function OrganizationSwitcherPage() {
return <OrganizationSwitcher />
}Pass props to <OrganizationProfile />
The <OrganizationSwitcher /> opens the <OrganizationProfile /> when a user selects Manage. To configure it, use the organizationProfileProps prop.
The following example uses separate appearance configurations for <OrganizationSwitcher /> and <OrganizationProfile />.
<OrganizationSwitcher
appearance={{
variables: {
colorPrimary: '#6c47ff',
},
}}
organizationProfileProps={{
appearance: {
variables: {
colorPrimary: '#0f766e',
},
},
}}
/>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
afterSelectPersonalUrl?- Type
string- Description
The full URL or path to navigate to after selecting the . Defaults to
undefined.
- Name
appearance?- Type
Appearance | undefined- Description
An object to style your components. Will only affect Clerk components and not Account Portal pages.
- Name
createOrganizationMode?- Type
'modal' | 'navigation'- Description
A property 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 /> 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 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 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
organizationProfileMode?- Type
'modal' | 'navigation'- Description
A property that controls whether clicking the Manage 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
Use this object to pass props to the <OrganizationProfile /> component opened by
<OrganizationSwitcher />. Theappearanceproperty is supported.See Pass props to
<OrganizationProfile />for an example.
- Name
organizationProfileUrl?- Type
string- Description
The full URL or path where the <OrganizationProfile /> component is mounted.
Customization
To learn how to customize Clerk components, see the customization documentation.
Feedback
Last updated on