<CreateOrganization /> component
The <CreateOrganization /> component is used to render an organization creation UI that allows users to create brand new organizations in your application.
Properties
All props are optional.
- Name
appearance- Type
Appearance | undefined- Description
Optional object to style your components. Will only affect Clerk components and not Account Portal pages.
- Name
afterCreateOrganizationUrl- Type
string- Description
Full URL or path to navigate to after creating a new organization.
- Name
routing- Type
'hash' | 'path' | 'virtual'- Description
The routing strategy for your pages.
Defaults to'path'in Next.js and Remix applications. Defaults tohashfor all other SDK's.
- Name
path- Type
string- Description
The path where the component is mounted on when
routingis set topath. It is ignored in hash- and virtual-based routing.
For example:/create-organization.
- Name
skipInvitationScreen- Type
boolean- Description
Hides the screen for sending invitations after an organization is created. When left undefined, Clerk will automatically hide the screen if the number of max allowed members is equal to 1
- Name
hideSlug- Type
boolean- Description
Hides the optional slug field in the organization creation screen.
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.
import { CreateOrganization } from '@clerk/nextjs'
export default function CreateOrganizationPage() {
return <CreateOrganization path="/create-organization" />
}import { CreateOrganization } from '@clerk/nextjs'
export default function CreateOrganizationPage() {
return <CreateOrganization path="/create-organization" />
}import { CreateOrganization } from '@clerk/clerk-react'
export default function CreateOrganizationPage() {
return <CreateOrganization path="/create-organization" />
}import { CreateOrganization } from '@clerk/remix'
export default function CreateOrganizationPage() {
return <CreateOrganization path="/create-organization" />
}---
import { CreateOrganization } from '@clerk/astro/components'
---
<CreateOrganization 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.
mountCreate
Render the <CreateOrganization /> component to an HTML <div> element.
function mountCreateOrganization(node: HTMLDivElement, props?: CreateOrganizationProps): void- Name
node- Type
HTMLDivElement- Description
The
<div>element used to render in the<CreateOrganization />component
- Name
props?- Type
CreateOrganizationProps- Description
The properties to pass to the
<CreateOrganization />component
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk publishable key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="create-organization"></div>
`
const createOrgDiv = document.getElementById('create-organization')
clerk.mountCreateOrganization(createOrgDiv)unmountCreate
Unmount and run cleanup on an existing <CreateOrganization /> component instance.
function unmountCreateOrganization(node: HTMLDivElement): void- Name
node- Type
HTMLDivElement- Description
The container
<div>element with a rendered<CreateOrganization />component instance
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk publishable key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="create-organization"></div>
`
const createOrgDiv = document.getElementById('create-organization')
clerk.mountCreateOrganization(createOrgDiv)
// ...
clerk.unmountCreateOrganization(createOrgDiv)openCreateOrganization()
Opens the <CreateOrganization /> component as an overlay at the root of your HTML body element.
function openCreateOrganization(props?: CreateOrganizationProps): void- Name
props?- Type
CreateOrganizationProps- Description
The properties to pass to the
<CreateOrganization />component
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk publishable key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="create-organization"></div>
`
const createOrgDiv = document.getElementById('create-organization')
clerk.openCreateOrganization(createOrgDiv)closeCreateOrganization()
Closes the organization profile overlay.
function closeCreateOrganization(): voidimport { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk publishable key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="create-organization"></div>
`
const createOrgDiv = document.getElementById('create-organization')
clerk.openCreateOrganization(createOrgDiv)
// ...
clerk.closeCreateOrganization(createOrgDiv)Customization
To learn about how to customize Clerk components, see the customization documentation.
Feedback
Last updated on