`<OrganizationProfile />` component

The <OrganizationProfile /> component is used to render a beautiful, full-featured organization management UI that allows users to manage their organization profile and security settings.

Properties

All props are optional.

Name	Type	Description
`appearance`	`Appearance \| undefined`	Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
`afterLeaveOrganizationUrl`	`string`	Full URL or path to navigate to after leaving an organization.
`routing`	`'hash' \| 'path' \| 'virtual'`	The routing strategy for your pages. Defaults to `'path'` in Next.js and Remix applications. Defaults to `hash` for all other SDK's.
`path`	`string`	The path where the component is mounted on when `routing` is set to `path`. It is ignored in hash- and virtual-based routing. For example: `/organization-profile`.

Usage with frameworks

You can embed the <OrganizationProfile /> component using the Next.js optional catch-all route(opens in a new tab). This allows you to redirect the user inside your application.

/app/organization-profile/[[...organization-profile]]/page.tsx
import { OrganizationProfile } from "@clerk/nextjs";
 
export default function OrganizationProfilePage() {
  return (
    <OrganizationProfile path="/organization-profile" />
  )
}

/pages/organization-profile/[[...index]].tsx
import { OrganizationProfile } from "@clerk/nextjs";
 
export default function OrganizationProfilePage() {
  return (
    <OrganizationProfile path="/organization-profile" />
  )
}

organization-profile.tsx
import { OrganizationProfile } from "@clerk/clerk-react";
 
export default function OrganizationProfilePage() {
  return <OrganizationProfile path="/organization-profile" />;
}

/pages/organization-profile/$.tsx
import { OrganizationProfile } from "@clerk/remix";
 
export default function OrganizationProfilePage() {
  return <OrganizationProfile path="/organization-profile" />;
}

Usage with JavaScript

The following methods available on an instance of the Clerk class are used to render and control the <OrganizationProfile /> component:

The following examples assume that you have followed the quickstart in order to add Clerk to your JavaScript application.

`mountOrganizationProfile()`

Render the <OrganizationProfile /> component to an HTML <div> element.


function mountOrganizationProfile(node: HTMLDivElement, props?: OrganizationProfileProps): void;

`mountOrganizationProfile()` params

Name	Type	Description
`node`	`HTMLDivElement`(opens in a new tab)	The `<div>` element used to render in the `<OrganizationProfile />` component
`props?`	`OrganizationProfileProps`	The properties to pass to the `<OrganizationProfile />` component

`mountOrganizationProfile()` usage

main.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
document.getElementById("app").innerHTML = `
  <div id="organization-profile"></div>
`;
 
const orgProfileDiv =
  document.getElementById("organization-profile");
 
clerk.mountOrganizationProfile(orgProfileDiv);

index.html
<!-- Add a <div id="organization-profile"> element to your HTML -->
<div id="organization-profile"></div>
 
<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-clerk-publishable-key="{{pub_key}}"
  src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript"
></script>
 
<script>
  window.addEventListener("load", async function () {
    await Clerk.load();
 
    const orgProfileDiv =
      document.getElementById('organization-profile');
 
    Clerk.mountOrganizationProfile(orgProfileDiv);
  });
</script>

`unmountOrganizationProfile()`

Unmount and run cleanup on an existing <OrganizationProfile /> component instance.


function unmountOrganizationProfile(node: HTMLDivElement): void;

`unmountOrganizationProfile()` params

Name	Type	Description
`node`	`HTMLDivElement`(opens in a new tab)	The container `<div>` element with a rendered `<OrganizationProfile />` component instance.

`unmountOrganizationProfile()` usage

main.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
document.getElementById('app').innerHTML = `
  <div id="organization-profile"></div>
`
 
const orgProfileDiv =
  document.getElementById('organization-profile');
 
clerk.mountOrganizationProfile(orgProfileDiv);
 
// ...
 
clerk.unmountOrganizationProfile(orgProfileDiv);

index.html
<!-- Add a <div id="organization-profile"> element to your HTML -->
<div id="organization-profile"></div>
 
<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-clerk-publishable-key="{{pub_key}}"
  src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript"
></script>
 
<script>
  window.addEventListener("load", async function () {
    await Clerk.load();
 
    const orgProfileDiv =
      document.getElementById('organization-profile');
 
    Clerk.mountOrganizationProfile(orgProfileDiv);
 
    // ...
 
    Clerk.unmountOrganizationProfile(orgProfileDiv);
  });
</script>

`openOrganizationProfile()`

Opens the <OrganizationProfile /> component as an overlay at the root of your HTML body element.


function openOrganizationProfile(props?: OrganizationProfileProps): void;

`openOrganizationProfile()` params

Name	Type	Description
`props?`	`OrganizationProfileProps`	The properties to pass to the `<OrganizationProfile />` component

`openOrganizationProfile()` usage

main.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
document.getElementById('app').innerHTML = `
  <div id="organization-profile"></div>
`
 
const orgProfileDiv =
  document.getElementById('organization-profile');
 
clerk.openOrganizationProfile(orgProfileDiv);

index.html
<!-- Add a <div id="organization-profile"> element to your HTML -->
<div id="organization-profile"></div>
 
<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-clerk-publishable-key="{{pub_key}}"
  src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript"
></script>
 
<script>
  window.addEventListener("load", async function () {
    await Clerk.load();
 
    const orgProfileDiv =
      document.getElementById('organization-profile');
 
    Clerk.openOrganizationProfile(orgProfileDiv);
  });
</script>

`closeOrganizationProfile()`

Closes the organization profile overlay.


function closeOrganizationProfile(): void;

`closeOrganizationProfile()` usage

main.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
document.getElementById('app').innerHTML = `
  <div id="organization-profile"></div>
`
 
const orgProfileDiv =
  document.getElementById('organization-profile');
 
clerk.closeOrganizationProfile(orgProfileDiv);

index.html
<!-- Add a <div id="organization-profile"> element to your HTML -->
<div id="organization-profile"></div>
 
<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-clerk-publishable-key="{{pub_key}}"
  src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript"
></script>
 
<script>
  window.addEventListener("load", async function () {
    await Clerk.load();
 
    const orgProfileDiv =
      document.getElementById('organization-profile');
 
    Clerk.closeOrganizationProfile(orgProfileDiv);
  });
</script>

Customization

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

In addition, you also can add custom pages and links to the <OrganizationProfile /> (/docs/components/customization/organization-profile).

Properties

Usage with frameworks

Usage with JavaScript

mountOrganizationProfile()

mountOrganizationProfile() params

mountOrganizationProfile() usage

unmountOrganizationProfile()

unmountOrganizationProfile() params

unmountOrganizationProfile() usage

openOrganizationProfile()

openOrganizationProfile() params

openOrganizationProfile() usage

closeOrganizationProfile()

closeOrganizationProfile() usage