Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.dev

<OrganizationSwitcher/>

Create or quickly switch between multiple organizations within your Next.js application

Overview

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

Organization Switcher Example

Embedding an <OrganizationSwitcher /> component

1

Props

NameTypeDescription
afterCreateOrganizationUrlstring

Full URL or path to navigate after creating a new organization.


afterSwitchOrganizationUrlstring

Full URL or path to navigate after a successful organization switch.

afterLeaveOrganizationUrlstring

Full URL or path to navigate to after the user leaves the currently active organization.

appearanceobject

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)

defaultOpenboolean

Controls the default state of the OrganizationSwitcher

organizationProfileModestring

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

organizationProfileUrlstring

Full URL or path where the <OrganizationProfile /> component is mounted.

hidePersonalboolean

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

createOrganizationUrlstring

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.

Was this helpful?

Clerk © 2022