Organization onboarding
A user needs to create a workspace, company, or team during onboarding.
Clerk · Component
CreateOrganization
CreateOrganization is Clerk's prebuilt UI for creating organizations. It supports post-creation navigation, configurable routing, invitation-step behavior, and a mounting fallback.
How it works
CreateOrganization renders Clerk's organization-creation interface. It lets a signed-in user create an organization and can optionally collect invitations, control routing, set the post-creation destination, and customize the loading UI.
Syntax
<CreateOrganization />Parameters
| Name | Type | Description |
|---|---|---|
afterCreateOrganizationUrl | string | Full URL or path to navigate to after creating a new organization. |
routing | 'hash' | 'path' | The routing strategy for your pages: 'hash' or 'path'. |
path | string | The path where the component is mounted when routing is set to path; ignored for hash routing. |
skipInvitationScreen | boolean | Hides the screen for sending invitations after an organization is created. |
fallback | ReactNode | Element rendered while the component is mounting. |
Returns
A rendered organization-creation UI component.
Key points
- The component provides a ready-made interface for creating organizations.
- Configure the destination after successful creation with the post-creation URL or path property.
- Choose between hash-based and path-based navigation through the routing property.
- Frameworks with built-in routing default to path routing.
- SDKs without that routing model default to hash routing.
- Provide a loading element to display while the component initializes.
Common mistakes
- The path prop has no effect unless routing is set to path.
- Leaving skipInvitationScreen unset can hide the invitation step automatically for organizations limited to one member.
Example: Basic Next.js usage
import { CreateOrganization } from '@clerk/nextjs'
export default function CreateOrganizationPage() {
return <CreateOrganization />
}Render this component on a page to provide the organization-creation flow.
When to use it
Team invitations
An application wants users to invite teammates immediately after creating an organization.
Routing and loading customization
A product needs Clerk's organization flow to match its application navigation and loading state.
Interview questions
QWhat is CreateOrganization used for?
It renders the organization creation UI and allows users to create new organizations within the application. In a Next.js page, import it from @clerk/nextjs and render <CreateOrganization />.
Follow-up: How would you control the route behavior? Set routing to either path or hash, then use path when path-based routing is selected.
QHow does routing affect this component?
routing accepts 'hash' or 'path'. The documented defaults are path for routing-aware frameworks such as Next.js and hash for other SDKs such as React.
Follow-up: What happens if path is supplied while routing uses hashes? The path is ignored, so choose path routing when the mounted URL must be controlled.
QWhat does skipInvitationScreen control?
skipInvitationScreen hides the invitation-sending screen after organization creation. If it is undefined, Clerk may hide that screen automatically when the maximum allowed member count is one.
Follow-up: When would you leave it undefined? Leave it unset when Clerk's member-limit-based behavior is appropriate; set it explicitly when the invitation step must always be shown or hidden.
Related
OrganizationProfileOrganizationSwitcherOrganizationList