Organization Onboarding

Overview

Organization onboarding combines user onboarding (profile + theme) with organization steps:

• Organization creation (name, slug, logo)
• Team member invitations
• Pending invitation handling

Available Steps

Quick Setup

pnpmnpmyarnbun
pnpm add '@kit/org-onboarding@workspace:*'
Copy

Expand
Copy to Clipboardimport { OrganizationOnboarding } from '@kit/org-onboarding';
import { dashboardRoutes } from '@kit/shared/config';
// ... other imports
 
export default async function OnboardingFullPage(): Promise<React.JSX.Element> {
    const db = await getDBClient();
    const user = await db.user.require();
 
    // Check if user already has organization memberships
    const memberships = await db.organization.getUserMemberships();
    if (memberships.length > 0) {
        // redirect to a user only sub-onboarding page
        return redirect(dashboardRoutes.paths.onboarding.user);
    }
 
    return (
        <div className="relative min-h-screen bg-background">
            <OrganizationOnboarding
                activeSteps={['profile', 'theme', 'organization', 'organization-invite']}
                metadata={{ user: user }}
                rootUrl={dashboardRoutes.url}
                redirectUrl={dashboardRoutes.paths.dashboard.index}
            />
        </div>
    );
}
Expand

Key Features

Smart Redirection

• Users with existing memberships → User onboarding
• New users → Full organization onboarding
• Pending invitations → Appropriate handling

Organization Creation

• Name, slug, and logo setup
• Slug validation (alphanumeric + hyphens/underscores)
• Logo upload with cropping

Team Invitations

• Invite up to 5 team members
• Email validation
• Role assignment
• Automatic invitation emails

Form Integration

• Extends user onboarding schema
• Transactional data processing
• Automatic user completion status

Component Props

When to Use

Use organization onboarding when you want users to:

• Set up their organization immediately after registration
• Invite team members during onboarding
• Create a complete workspace setup experience

For simpler flows, use User Onboarding instead.

Architecture

The organization onboarding builds on top of user onboarding by:

1. Extending USER_ONBOARDING_STEP with organization steps
2. Adding organization-specific schemas
3. Providing dedicated server actions for organization data
4. Handling complex membership and invitation logic

This modular approach keeps the code maintainable while providing a rich onboarding experience.