Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

<CreateOrganization /> component

Create Organization Example

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

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;
NameTypeDescription
nodeHTMLDivElement(opens in a new tab)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;
NameTypeDescription
props?CreateOrganizationPropsThe 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.

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

What did you think of this content?

Clerk © 2024