Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

<OrganizationProfile /> component

Organization Profile Example

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;
NameTypeDescription
nodeHTMLDivElement(opens in a new tab)The <div> element used to render in the <OrganizationProfile /> component
props?OrganizationProfilePropsThe 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;
NameTypeDescription
nodeHTMLDivElement(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;
NameTypeDescription
props?OrganizationProfilePropsThe 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.

NameTypeDescription
afterLeaveOrganizationUrlstringFull URL or path to navigate after leaving an organization.
routing'hash' | 'path' | 'virtual'The routing strategy for your pages.
pathstringThe path where the component is mounted when path-based routing is used.
e.g. /user-profile.
This prop is ignored in hash-based routing.
appearanceAppearance | undefinedOptional object to style your components. Will only affect Clerk Components and not Account Portal pages.
customPagesCustomPage[]An array of custom pages to add to the organization profile.

What did you think of this content?

Clerk Β© 2024