Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

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

Properties

All props are optional.

NameTypeDescription
appearanceAppearance | undefinedOptional object to style your components. Will only affect Clerk Components and not Account Portal pages.
afterLeaveOrganizationUrlstringFull URL or path to navigate to 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.
For example: /organization-profile
This prop is ignored in hash- and virtual-based routing.

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

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

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

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

NameTypeDescription
nodeHTMLDivElement(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

NameTypeDescription
props?OrganizationProfilePropsThe 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).

Last updated on March 26, 2024

What did you think of this content?

Clerk © 2024