`<CreateOrganization />` Component

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

`mountCreateOrganization()`

Render the <CreateOrganization /> 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="create-organization"
  ></div>
`;
 
const createOrganizationComponent = document.querySelector<HTMLDivElement>('#create-organization')!;
 
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
 
clerk.mountCreateOrganization(createOrganizationComponent, {
  appearance: {
    baseTheme: dark
  }
});


<div id="create-organization"></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 createOrganizationComponent = document.querySelector('#create-organization');
 
    window.Clerk.mountCreateOrganization(createOrganizationComponent, {
      appearance: {
        baseTheme: dark
      }
    });
  });
  document.body.appendChild(script);
</script>

Properties


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

Name	Type	Description
`node`	`HTMLDivElement`	The `<div>` element used to render in the `<CreateOrganization />` component
`props?`	`CreateOrganizationProps`	The properties to pass to the `<CreateOrganization />` component

`unmountCreateOrganization`

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

Usage


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


<div id="create-organization"></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 createOrganizationComponent = document.querySelector('#create-organization');
 
    window.Clerk.mountCreateOrganization(createOrganizationComponent);
 
    // ...
 
    window.Clerk.unmountCreateOrganization(createOrganizationComponent);
  });
  document.body.appendChild(script);
</script>

Properties


function unmountCreateOrganization(node: HTMLDivElement): void;

Name	Type	Description
`node`	`HTMLDivElement`	The container `<div>` element with a rendered `<CreateOrganization />` component instance

`openCreateOrganization`

Opens the <CreateOrganization /> 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.openCreateOrganization({
  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.openCreateOrganization({
      appearance: {
        baseTheme: dark
      }
    });
  });
  document.body.appendChild(script);
</script>

Properties


function openCreateOrganization(props?: CreateOrganizationProps): void;

Name	Type	Description
`props?`	`CreateOrganizationProps`	The properties to pass to the `<CreateOrganization />` component

`closeCreateOrganization`

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.openCreateOrganization();
 
// ...
 
clerk.closeCreateOrganization();


<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.openCreateOrganization();
 
    // ...
 
    window.Clerk.closeCreateOrganization();
  });
  document.body.appendChild(script);
</script>

Properties


function closeCreateOrganization(): void;

`CreateOrganizationProps`

All props below are optional.

Name	Type	Description
`afterCreateOrganizationUrl`	`string`	Full URL or path to navigate after creating a new 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. /create-org. This prop is ignored in hash and virtual based routing.
`appearance`	`Appearance \| undefined`	Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.

Last updated on November 21, 2023