`<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'
Description
The routing strategy for your pages. Defaults to 'path' for frameworks that handle routing, such as Next.js and Remix. Defaults to hash for all other SDK's, such as React.
Name
path
Type
string
Description
The path where the component is mounted on when routing is set to path. It is ignored in hash-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.
Name
fallback?
Type
ReactNode
Description
An optional element to be rendered while the component is mounting.

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.

Next.js

React

Astro

Expo

Remix

Tanstack React Start

Vue

app/create-organization/[[...create-organization]]/page.tsx

import { CreateOrganization } from '@clerk/nextjs'

export default function CreateOrganizationPage() {
  return <CreateOrganization />
}

create-organization.tsx

import { CreateOrganization } from '@clerk/clerk-react'

export default function CreateOrganizationPage() {
  return <CreateOrganization />
}

/pages/create-organization.astro

---
import { CreateOrganization } from '@clerk/astro/components'
---

<CreateOrganization />

Note

This component can be used in Expo Web projects, but won't work in native environments (iOS or Android). For native apps, use the supported native components instead.

/app/create-organization.web.tsx

import { CreateOrganization } from '@clerk/clerk-expo/web'

export default function CreateOrganizationPage() {
  return <CreateOrganization />
}

/route/create-organization/$.tsx

import { CreateOrganization } from '@clerk/remix'

export default function CreateOrganizationPage() {
  return <CreateOrganization />
}

app/routes/create-organization.tsx

import { CreateOrganization } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/create-organization')({
  component: CreateOrganizationPage,
})

function CreateOrganizationPage() {
  return <CreateOrganization />
}

create-organization.vue

<script setup lang="ts">
import { CreateOrganization } from '@clerk/vue'
</script>

<template>
  <CreateOrganization />
</template>

Usage with JavaScript

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

mountCreateOrganization
unmountCreateOrganization
openCreateOrganization
closeCreateOrganization

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

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

`mountCreateOrganization()` usage

main.js

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)

`unmountCreateOrganization()`

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

function unmountCreateOrganization(node: HTMLDivElement): void

`unmountCreateOrganization()` params

Name
node
Type
HTMLDivElement
Description
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 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

`openCreateOrganization()` params

Name
props?
Type
CreateOrganizationProps
Description
The 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 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(): void

`closeCreateOrganization()` usage

main.js

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)

// ...

clerk.closeCreateOrganization(createOrgDiv)

Customization

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

Edit on GitHub

Last updated on Aug 22, 2025

<CreateOrganization /> component

Feedback

`<CreateOrganization />` component