diff --git a/apps/webapp/app/components/SetupCommands.tsx b/apps/webapp/app/components/SetupCommands.tsx
index 4071444ee3..dcfae4f88b 100644
--- a/apps/webapp/app/components/SetupCommands.tsx
+++ b/apps/webapp/app/components/SetupCommands.tsx
@@ -1,3 +1,5 @@
+import { createContext, useContext, useState } from "react";
+import { useAppOrigin } from "~/hooks/useAppOrigin";
 import { useProject } from "~/hooks/useProject";
 import { InlineCode } from "./code/InlineCode";
 import {
@@ -8,7 +10,31 @@ import {
 } from "./primitives/ClientTabs";
 import { ClipboardField } from "./primitives/ClipboardField";
 import { Paragraph } from "./primitives/Paragraph";
-import { useAppOrigin } from "~/hooks/useAppOrigin";
+
+type PackageManagerContextType = {
+  activePackageManager: string;
+  setActivePackageManager: (value: string) => void;
+};
+
+const PackageManagerContext = createContext<PackageManagerContextType | undefined>(undefined);
+
+export function PackageManagerProvider({ children }: { children: React.ReactNode }) {
+  const [activePackageManager, setActivePackageManager] = useState("npm");
+
+  return (
+    <PackageManagerContext.Provider value={{ activePackageManager, setActivePackageManager }}>
+      {children}
+    </PackageManagerContext.Provider>
+  );
+}
+
+function usePackageManager() {
+  const context = useContext(PackageManagerContext);
+  if (context === undefined) {
+    throw new Error("usePackageManager must be used within a PackageManagerProvider");
+  }
+  return context;
+}
 
 export function InitCommand({ appOrigin, apiKey }: { appOrigin: string; apiKey: string }) {
   return (
@@ -131,7 +157,6 @@ export function TriggerDevStep({ extra }: { extra?: string }) {
   );
 }
 
-// Trigger.dev version 3 setup commands
 const v3PackageTag = "latest";
 
 function getApiUrlArg() {
@@ -160,14 +185,19 @@ function getApiUrlArg() {
 export function InitCommandV3() {
   const project = useProject();
   const projectRef = project.ref;
-
   const apiUrlArg = getApiUrlArg();
 
   const initCommandParts = [`trigger.dev@${v3PackageTag}`, "init", `-p ${projectRef}`, apiUrlArg];
   const initCommand = initCommandParts.filter(Boolean).join(" ");
 
+  const { activePackageManager, setActivePackageManager } = usePackageManager();
+
   return (
-    <ClientTabs defaultValue="npm">
+    <ClientTabs
+      defaultValue="npm"
+      value={activePackageManager}
+      onValueChange={setActivePackageManager}
+    >
       <ClientTabsList>
         <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
         <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
@@ -202,8 +232,14 @@ export function InitCommandV3() {
 }
 
 export function TriggerDevStepV3() {
+  const { activePackageManager, setActivePackageManager } = usePackageManager();
+
   return (
-    <ClientTabs defaultValue="npm">
+    <ClientTabs
+      defaultValue="npm"
+      value={activePackageManager}
+      onValueChange={setActivePackageManager}
+    >
       <ClientTabsList>
         <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
         <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
@@ -238,8 +274,14 @@ export function TriggerDevStepV3() {
 }
 
 export function TriggerLoginStepV3() {
+  const { activePackageManager, setActivePackageManager } = usePackageManager();
+
   return (
-    <ClientTabs defaultValue="npm">
+    <ClientTabs
+      defaultValue="npm"
+      value={activePackageManager}
+      onValueChange={setActivePackageManager}
+    >
       <ClientTabsList>
         <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
         <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
diff --git a/apps/webapp/app/components/primitives/ClientTabs.tsx b/apps/webapp/app/components/primitives/ClientTabs.tsx
index c8ac014dd3..52d10b8cfe 100644
--- a/apps/webapp/app/components/primitives/ClientTabs.tsx
+++ b/apps/webapp/app/components/primitives/ClientTabs.tsx
@@ -5,7 +5,11 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cn } from "~/utils/cn";
 import { motion } from "framer-motion";
 
-const ClientTabs = TabsPrimitive.Root;
+const ClientTabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
+>((props, ref) => <TabsPrimitive.Root ref={ref} {...props} />);
+ClientTabs.displayName = TabsPrimitive.Root.displayName;
 
 const ClientTabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
index 74d5ca966c..69c63e5148 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
@@ -20,7 +20,12 @@ import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
 import { TaskIcon } from "~/assets/icons/TaskIcon";
 import { Feedback } from "~/components/Feedback";
-import { InitCommandV3, TriggerDevStepV3, TriggerLoginStepV3 } from "~/components/SetupCommands";
+import {
+  InitCommandV3,
+  PackageManagerProvider,
+  TriggerDevStepV3,
+  TriggerLoginStepV3,
+} from "~/components/SetupCommands";
 import { StepContentContainer } from "~/components/StepContentContainer";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { InlineCode } from "~/components/code/InlineCode";
@@ -431,38 +436,40 @@ export default function Page() {
 
 function CreateTaskInstructions() {
   return (
-    <div>
-      <div className="mb-6 flex items-center justify-between border-b">
-        <Header1 spacing>Get setup in 3 minutes</Header1>
-        <div className="flex items-center gap-2">
-          <Feedback
-            button={
-              <Button variant="minimal/small" LeadingIcon={ChatBubbleLeftRightIcon}>
-                I'm stuck!
-              </Button>
-            }
-            defaultValue="help"
-          />
+    <PackageManagerProvider>
+      <div>
+        <div className="mb-6 flex items-center justify-between border-b">
+          <Header1 spacing>Get setup in 3 minutes</Header1>
+          <div className="flex items-center gap-2">
+            <Feedback
+              button={
+                <Button variant="minimal/small" LeadingIcon={ChatBubbleLeftRightIcon}>
+                  I'm stuck!
+                </Button>
+              }
+              defaultValue="help"
+            />
+          </div>
         </div>
+        <StepNumber stepNumber="1" title="Run the CLI 'init' command in an existing project" />
+        <StepContentContainer>
+          <InitCommandV3 />
+          <Paragraph spacing>
+            You'll notice a new folder in your project called{" "}
+            <InlineCode variant="small">trigger</InlineCode>. We've added a very simple example task
+            in here to help you get started.
+          </Paragraph>
+        </StepContentContainer>
+        <StepNumber stepNumber="2" title="Run the CLI 'dev' command" />
+        <StepContentContainer>
+          <TriggerDevStepV3 />
+        </StepContentContainer>
+        <StepNumber stepNumber="3" title="Waiting for tasks" displaySpinner />
+        <StepContentContainer>
+          <Paragraph>This page will automatically refresh.</Paragraph>
+        </StepContentContainer>
       </div>
-      <StepNumber stepNumber="1" title="Run the CLI 'init' command in your project" />
-      <StepContentContainer>
-        <InitCommandV3 />
-        <Paragraph spacing>
-          You’ll notice a new folder in your project called{" "}
-          <InlineCode variant="small">trigger</InlineCode>. We’ve added a very simple example task
-          in here to help you get started.
-        </Paragraph>
-      </StepContentContainer>
-      <StepNumber stepNumber="2" title="Run the CLI 'dev' command" />
-      <StepContentContainer>
-        <TriggerDevStepV3 />
-      </StepContentContainer>
-      <StepNumber stepNumber="3" title="Waiting for tasks" displaySpinner />
-      <StepContentContainer>
-        <Paragraph>This page will automatically refresh.</Paragraph>
-      </StepContentContainer>
-    </div>
+    </PackageManagerProvider>
   );
 }
 
@@ -484,26 +491,28 @@ function UserHasNoTasks() {
         }
       >
         {open ? (
-          <div>
-            <Header2 spacing>Get setup in 3 minutes</Header2>
-
-            <StepNumber stepNumber="1" title="Open up your project" className="mt-6" />
-            <StepContentContainer>
-              <Paragraph>You'll need to open a terminal at the root of your project.</Paragraph>
-            </StepContentContainer>
-            <StepNumber stepNumber="2" title="Run the CLI 'login' command" />
-            <StepContentContainer>
-              <TriggerLoginStepV3 />
-            </StepContentContainer>
-            <StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
-            <StepContentContainer>
-              <TriggerDevStepV3 />
-            </StepContentContainer>
-            <StepNumber stepNumber="4" title="Waiting for tasks" displaySpinner />
-            <StepContentContainer>
-              <Paragraph>This page will automatically refresh.</Paragraph>
-            </StepContentContainer>
-          </div>
+          <PackageManagerProvider>
+            <div>
+              <Header2 spacing>Get setup in 3 minutes</Header2>
+
+              <StepNumber stepNumber="1" title="Open up your project" className="mt-6" />
+              <StepContentContainer>
+                <Paragraph>You'll need to open a terminal at the root of your project.</Paragraph>
+              </StepContentContainer>
+              <StepNumber stepNumber="2" title="Run the CLI 'login' command" />
+              <StepContentContainer>
+                <TriggerLoginStepV3 />
+              </StepContentContainer>
+              <StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
+              <StepContentContainer>
+                <TriggerDevStepV3 />
+              </StepContentContainer>
+              <StepNumber stepNumber="4" title="Waiting for tasks" displaySpinner />
+              <StepContentContainer>
+                <Paragraph>This page will automatically refresh.</Paragraph>
+              </StepContentContainer>
+            </div>
+          </PackageManagerProvider>
         ) : (
           "Your DEV environment isn't setup yet."
         )}