Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

<CreateOrganization /> component

Organization Switcher Example

The <CreateOrganization /> component is used to render an organization creation UI that allows users to create brand new organizations within your application.

Properties

All props are optional.

NameTypeDescription
appearanceAppearance | undefinedOptional object to style your components. Will only affect Clerk Components and not Account Portal pages.
afterCreateOrganizationUrlstringFull URL or path to navigate to after creating a new 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, /create-org
This prop is ignored in hash- and virtual-based routing.

Usage with frameworks

The following example includes a basic implementation of the <CreateOrganization /> component. You can use this as a starting point for your own implementation.

/app/create-organization/[[...create-organization]]/page.tsx
import { CreateOrganization } from "@clerk/nextjs"; export default function CreateOrganizationPage() { return <CreateOrganization />; }
/pages/create-organization/[[...index]].tsx
import { CreateOrganization } from "@clerk/nextjs"; export default function CreateOrganizationPage() { return ( <CreateOrganization routing="path" path="/create-organization" /> ) }

Usage with JavaScript

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

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

mountCreateOrganization()

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

function mountCreateOrganization(node: HTMLDivElement, props?: CreateOrganizationProps): void;

mountCreateOrganization() params

NameTypeDescription
nodeHTMLDivElement(opens in a new tab)The <div> element used to render in the <CreateOrganization /> component
props?CreateOrganizationPropsThe properties to pass to the <CreateOrganization /> component

mountCreateOrganization() 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="create-organization"></div> `; const createOrgDiv = document.getElementById("create-organization"); clerk.mountCreateOrganization(createOrgDiv);
index.html
<!-- Add a <div id="create-organization"> element to your HTML --> <div id="create-organization"></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 createOrgDiv = document.getElementById("create-organization"); Clerk.mountCreateOrganization(createOrgDiv); }); </script>

unmountCreateOrganization()

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

function unmountCreateOrganization(node: HTMLDivElement): void;

unmountCreateOrganization() params

NameTypeDescription
nodeHTMLDivElement(opens in a new tab)The container <div> element with a rendered <CreateOrganization /> component instance

unmountCreateOrganization() 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="create-organization"></div> ` const createOrgDiv = document.getElementById('create-organization'); clerk.mountCreateOrganization(createOrgDiv); // ... clerk.unmountCreateOrganization(createOrgDiv);
index.html
<!-- Add a <div id="create-organization"> element to your HTML --> <div id="create-organization"></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 createOrgDiv = document.getElementById('create-organization'); Clerk.mountCreateOrganization(createOrgDiv); // ... Clerk.unmountCreateOrganization(createOrgDiv); }); </script>

openCreateOrganization()

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

function openCreateOrganization(props?: CreateOrganizationProps): void;

openCreateOrganization() params

NameTypeDescription
props?CreateOrganizationPropsThe properties to pass to the <CreateOrganization /> component

openCreateOrganization() 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="create-organization"></div> ` const createOrgDiv = document.getElementById('create-organization'); clerk.openCreateOrganization(createOrgDiv);
index.html
<!-- Add a <div id="create-organization"> element to your HTML --> <div id="create-organization"></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 createOrgDiv = document.getElementById('create-organization'); Clerk.openCreateOrganization(createOrgDiv); }); </script>

closeCreateOrganization()

Closes the organization profile overlay.

function closeCreateOrganization(): void;

closeCreateOrganization() 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="create-organization"></div> ` const createOrgDiv = document.getElementById('create-organization'); clerk.openCreateOrganization(createOrgDiv); // ... clerk.closeCreateOrganization(createOrgDiv);
index.html
<!-- Add a <div id="create-organization"> element to your HTML --> <div id="create-organization"></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 createOrgDiv = document.getElementById('create-organization'); Clerk.openCreateOrganization(createOrgDiv); // ... Clerk.closeCreateOrganization(createOrgDiv); }); </script>

Customization

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

Last updated on March 26, 2024

What did you think of this content?

Clerk © 2024