Skip to main content

​
<CreateWorkspaceForm />

The <CreateWorkspaceForm /> provides an intuitive interface for users to generate “Workspaces”. In Wacht’s architecture, Workspaces represent the second, deeper level of multi-tenancy. They are strictly bound to a parent Organization. They are designed for segmenting distinct projects, deployment environments (e.g., separating “Staging” from “Production” resources), or isolating internal departmental domains for a single B2B customer.

​
Import

import { CreateWorkspaceForm } from "@wacht/react-router";

​
Important: Organizational Dependency

Because Workspaces are innately nested underneath Organizations, this component requires an active organization to be set in the user’s session context. If an organization is not currently active, rendering this component will intentionally throw a runtime error. This design prevents the creation of “orphaned” workspaces that lack a parent entity.

​
Usage

Wrap the component in a guardrail (like <RequireActiveTenancy />) to guarantee it only mounts when a valid parent organization is present in the session. 
import { CreateWorkspaceForm, RequireActiveTenancy } from "@wacht/react-router";

export default function NewProjectModal() {
  return (
    <div className="p-8 bg-white border border-zinc-200 rounded-2xl shadow-xl max-w-lg w-full">
      <div className="mb-6 border-b pb-4">
        <h3 className="text-xl font-bold text-zinc-900 tracking-tight">Initialize Workspace</h3>
        <p className="text-sm text-zinc-500 mt-1">Create an isolated environment for your project resources.</p>
      </div>
      
      {/* 
        Strict boundary: the fallback UI renders if the user 
        somehow bypassed selecting an organization.
      */}
      <RequireActiveTenancy fallback={
        <div className="p-4 bg-amber-50 text-amber-800 rounded-lg text-sm font-medium">
          You must select an organization before creating a workspace.
        </div>
      }>
        <CreateWorkspaceForm />
      </RequireActiveTenancy>
    </div>
  );
}