║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: '<CreateOrganization /> component' description: Clerk's <CreateOrganization /> component is used to render an organization creation UI that allows users to create brand new organizations within your application. sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend

{{ style: { maxWidth: '492px' } }}

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

<If sdk={["astro", "chrome-extension", "expo", "nextjs", "nuxt", "react", "react-router", "remix", "tanstack-react-start", "vue"]}

Example

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

<If sdk="nextjs"> ```jsx {{ filename: 'app/create-organization/[[...create-organization]]/page.tsx' }} import { CreateOrganization } from '@clerk/nextjs'

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

</If> <If sdk="react"> ```jsx {{ filename: 'src/App.tsx' }} import { CreateOrganization } from '@clerk/clerk-react'

function App() {
  return <CreateOrganization />
}

export default App
```

</If> <If sdk="react-router"> ```tsx {{ filename: 'app/routes/create-organization.tsx' }} import { CreateOrganization } from '@clerk/react-router'

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

</If> <If sdk="astro"> ```astro {{ filename: '/pages/create-organization.astro' }} --- import { CreateOrganization } from '@clerk/astro/components' ---

<CreateOrganization />
```

</If> <If sdk="expo"> <Include src="_partials/expo/web-only-callout" />

```jsx {{ filename: '/app/create-organization.web.tsx' }}
import { CreateOrganization } from '@clerk/clerk-expo/web'

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

</If> <If sdk="chrome-extension"> ```jsx {{ filename: 'src/routes/create-organization.tsx' }} import { CreateOrganization } from '@clerk/chrome-extension'

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

</If> <If sdk="remix"> ```tsx {{ filename: 'app/routes/create-organization.tsx' }} import { CreateOrganization } from '@clerk/remix'

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

</If> <If sdk="tanstack-react-start"> ```tsx {{ filename: '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 />
}
```

</If> <If sdk="vue"> ```vue {{ filename: 'create-organization.vue' }} <script setup lang="ts"> import { CreateOrganization } from '@clerk/vue' </script>

<template>
  <CreateOrganization />
</template>
```

</If> <If sdk="nuxt"> ```vue {{ filename: 'create-organization.vue' }} <script setup lang="ts"> // Components are automatically imported </script>

<template>
  <CreateOrganization />
</template>
```

</If> </If> <If sdk="js-frontend"> ## 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.

<code>mountCreate<wbr />Organization()</code>

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

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

<code>mountCreate<wbr />Organization()</code> params

<Properties> - `node` - [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)

The `<div>` element used to render in the `<CreateOrganization />` component

---

- `props?`
- [`CreateOrganizationProps`](#properties)

The properties to pass to the `<CreateOrganization />` component

</Properties>

mountCreateOrganization() usage

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)

<code>unmountCreate<wbr />Organization()</code>

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

function unmountCreateOrganization(node: HTMLDivElement): void

unmountCreateOrganization() params

<Properties> - `node` - [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)

The container `<div>` element with a rendered `<CreateOrganization />` component instance

</Properties>

unmountCreateOrganization() usage

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

<Properties> - `props?` - [`CreateOrganizationProps`](#properties)

The properties to pass to the `<CreateOrganization />` component

</Properties>

openCreateOrganization() usage

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

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)

</If>

Properties

All props are optional.

<Properties> - `appearance` - <code>[Appearance](/docs/guides/customizing-clerk/appearance-prop/overview) | undefined</code>

Optional object to style your components. Will only affect Clerk components and not Account Portal pages.

---

• afterCreateOrganizationUrl
• string

Full URL or path to navigate to after creating a new organization.

---

• routing
• 'hash' | 'path'

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.

---

• path
• string

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.

---

• skipInvitationScreen
• boolean

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

---

• hideSlug
• boolean

Hides the optional slug field in the organization creation screen.

---

• fallback?
• ReactNode

An optional element to be rendered while the component is mounting. </Properties>

Customization

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

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║