`<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.

`mountOrganizationProfile()`

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

Usage


import Clerk from '@clerk/clerk-js';
import { dark } from "@clerk/themes";
 
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div
    id="organization-profile"
  ></div>
`;
 
const organizationProfileComponent = document.querySelector<HTMLDivElement>('#organization-profile')!;
 
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
 
clerk.mountOrganizationProfile(organizationProfileComponent, {
  appearance: {
    baseTheme: dark
  }
});


<div id="organization-profile"></div>
<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]');
  script.async = true;
  script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
 
  script.addEventListener('load', async function () {
    await window.Clerk.load();
 
    const organizationProfileComponent = document.querySelector('#organization-profile');
 
    window.Clerk.mountOrganizationProfile(organizationProfileComponent, {
      appearance: {
        baseTheme: dark
      }
    });
  });
  document.body.appendChild(script);
</script>

Properties


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

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

`unmountOrganizationProfile()`

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

Usage


import Clerk from '@clerk/clerk-js';
 
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div
    id="organization-profile"
  ></div>
`
 
const organizationProfileComponent = document.querySelector<HTMLDivElement>('#organization-profile')!;
 
const clerk = new Clerk('pk_[publishable_key]');
 
await clerk.load();
 
clerk.mountOrganizationProfile(organizationProfileComponent);
 
// ...
 
clerk.unmountOrganizationProfile(organizationProfileComponent);


<div id="organization-profile"></div>
<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]');
  script.async = true;
  script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
 
  script.addEventListener('load', async function () {
    await window.Clerk.load();
 
    const organizationProfileComponent = document.querySelector('#organization-profile');
 
    window.Clerk.mountOrganizationProfile(organizationProfileComponent);
 
    // ...
 
    window.Clerk.unmountOrganizationProfile(organizationProfileComponent);
  });
  document.body.appendChild(script);
</script>

Properties


function unmountOrganizationProfile(node: HTMLDivElement): void;

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

`openOrganizationProfile()`

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

Usage


import Clerk from '@clerk/clerk-js';
import { dark } from "@clerk/themes";
 
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
 
clerk.openOrganizationProfile({
  appearance: {
    baseTheme: dark
  }
});


<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]');
  script.async = true;
  script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
 
  script.addEventListener('load', async function () {
    await window.Clerk.load();
 
    window.Clerk.openOrganizationProfile({
      appearance: {
        baseTheme: dark
      }
    });
  });
  document.body.appendChild(script);
</script>

Properties


function openOrganizationProfile(props?: OrganizationProfileProps): void;

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

`closeOrganizationProfile()`

Closes the organization profile overlay.

Usage


import Clerk from '@clerk/clerk-js';
import { dark } from "@clerk/themes";
 
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
 
clerk.openOrganizationProfile();
 
// ...
 
clerk.closeOrganizationProfile();


<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]');
  script.async = true;
  script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
 
  script.addEventListener('load', async function () {
    await window.Clerk.load();
 
    window.Clerk.openOrganizationProfile();
 
    // ...
 
    window.Clerk.closeOrganizationProfile();
  });
  document.body.appendChild(script);
</script>

Properties


function closeOrganizationProfile(): void;

Custom pages

You can add customized pages for the <OrganizationProfile /> component by using the customPages prop.


import Clerk from '@clerk/clerk-js';
 
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
 
clerk.openOrganizationProfile({
  customPages: [
    {
      url: "custom-page",
      label: "Custom Page",
      mountIcon: (el) => {
          el.innerHTML = "👋";
      },
      unmountIcon: (el) => {
          el.innerHTML = "";
      },
      mount: (el) => {
          el.innerHTML = `
            <h1><b>Custom Page</b></h1>
            <p>This is the content of the custom page.</p>
            `;
      },
      unmount: (el) => {
          el.innerHTML = "";
      },
    },
    {
      url: "/other-page",
      label: "Other Page",
      mountIcon: (el) => {
          el.innerHTML = "🌐";
      },
      unmountIcon: (el) => {
          el.innerHTML = "";
      },
    }
  ]
});


<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]');
  script.async = true;
  script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
 
  script.addEventListener('load', async function () {
    await window.Clerk.load();
 
    window.Clerk.openOrganizationProfile({
      customPages: [
        {
          url: "custom-page",
          label: "Custom Page",
          mountIcon: (el) => {
              el.innerHTML = "👋";
          },
          unmountIcon: (el) => {
              el.innerHTML = "";
          },
          mount: (el) => {
              el.innerHTML = `
                    <h1><b>Custom Page</b></h1>
                    <p>This is the content of the custom page.</p>
                    `;
          },
          unmount: (el) => {
              el.innerHTML = "";
          },
        },
        {
          url: "/other-page",
          label: "Other Page",
          mountIcon: (el) => {
              el.innerHTML = "🌐";
          },
          unmountIcon: (el) => {
              el.innerHTML = "";
          },
        }
      ]
    });
  });
  document.body.appendChild(script);
</script>

`OrganizationProfileProps`

All props below are optional.

Name	Type	Description
`afterLeaveOrganizationUrl`	`string`	Full URL or path to navigate after leaving an organization.
`routing`	`'hash' \| 'path' \| 'virtual'`	The routing strategy for your pages.
`path`	`string`	The path where the component is mounted when path-based routing is used. e.g. `/user-profile`. This prop is ignored in hash-based routing.
`appearance`	`Appearance \| undefined`	Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
`customPages`	`CustomPage[]`	An array of custom pages to add to the organization profile.