Skip to main content

Add organization creation to your app

Drop in <CreateOrganization /> to let your users easily create organizations and invite new members.

Start buildingView docs
Create organization
Logo
Upload
Recommended size 1:1, up to 10MB.
Name
Organization name
Slug
my-org
Create organization
Secured by
Org management

Pre-filled and ready to go

Clerk automatically suggests an organization name and logo based on the user's email domain. Users can confirm or customize before creating

Create organization
Logo
Upload
Recommended size 1:1, up to 10MB.
Name
Organization name
Slug
my-org
Create organization
Secured by
Member management

Enable entire team invites

Users can paste a comma-separated list of emails and assign roles in one step.

Invite new members
example@email.com, example@email.com
Role: Member
Member
Admin
Skip
Send invitation
Secured by
Customization

Customizable to your brand

Match the look and feel of your product with full styling control. Override themes, layout, and behaviors to create an account menu that feels native to your app.

  • Theme tokens and CSS overrides
  • Dark mode support
  • Works in both server and client components
Create organization
Logo
acme logo
Upload
Recommended size 1:1, up to 10MB.
Name
Acme
Slug
acme
Create organization
Secured by

Implement create organization in minutes

Drop-in <CreateOrganization />

Build secure, scalable authentication in minutes with Clerk’s SDKs. Drop in pre-built UI components and onboard users instantly, without friction or security concerns.

Get started today

Next.js
React
TanStack React Start
Expo
iOS
Android

Clerk API

Custom flows

Want full control over your onboarding experience? Our headless APIs give you the flexibility to build exactly what you need.

View custom flows documentation
import { useOrganizationCreationDefaults, useOrganizationList } from '@clerk/tanstack-react-start'
import { FormEventHandler, useEffect, useState } from 'react'

export default function CreateOrganizationWithWarning() {
  const { isLoaded, createOrganization, setActive } = useOrganizationList()
  const { data: defaults, isLoading } = useOrganizationCreationDefaults()
  const [organizationName, setOrganizationName] = useState('')

  useEffect(() => {
    if (defaults?.form.name) {
      setOrganizationName(defaults.form.name)
    }
  }, [defaults?.form.name])

  if (!isLoaded || isLoading) return <div>Loading...</div>

  // Check if an organization with this name/domain already exists
  const advisory = defaults?.advisory
  const showWarning = advisory?.code === 'organization_already_exists'
  const existingOrgName = advisory?.meta?.organization_name
  const existingOrgDomain = advisory?.meta?.organization_domain

  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
    e.preventDefault()
    try {
      const newOrganization = await createOrganization?.({ name: organizationName })
      // Set the created Organization as the Active Organization
      if (newOrganization) await setActive({ organization: newOrganization.id })
    } catch (err) {
      // See https://clerk.com/docs/guides/development/custom-flows/error-handling
      // for more info on error handling
      console.error(JSON.stringify(err, null, 2))
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={organizationName}
        onChange={(e) => setOrganizationName(e.target.value)}
        placeholder="Organization name"
      />
      {showWarning && (
        <p style={{ color: 'orange' }}>
          An organization "{existingOrgName}" already exists for the domain "{existingOrgDomain}".
        </p>
      )}
      <button type="submit">Create organization</button>
    </form>
  )
}