add react router

.changeset/nine-bobcats-admire.md

@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": minor
+---
+
+Add React Router

apps/cli/package.json

@@ -7,10 +7,7 @@
 	"bin": {
 		"create-better-t-stack": "dist/index.js"
 	},
-	"files": [
+	"files": ["dist", "template"],
-		"dist",
-		"template"
-	],
 	"keywords": [
 		"typescript",
 		"scaffold",

apps/cli/src/constants.ts

@@ -9,7 +9,7 @@ export const PKG_ROOT = path.join(distPath, "../");
 
 export const DEFAULT_CONFIG: ProjectConfig = {
 	projectName: "my-better-t-app",
-	frontend: ["web"],
+	frontend: ["tanstack-router"],
 	database: "sqlite",
 	orm: "drizzle",
 	auth: true,

apps/cli/src/helpers/addons-setup.ts

@@ -15,16 +15,17 @@ export async function setupAddons(
 	packageManager: ProjectPackageManager,
 	frontends: ProjectFrontend[],
 ) {
-	const hasWebFrontend = frontends.includes("web");
+	const hasWebFrontend =
+		frontends.includes("react-router") || frontends.includes("tanstack-router");
 
 	// if (addons.includes("docker")) {
 	//  await setupDocker(projectDir);
 	// }
 	if (addons.includes("pwa") && hasWebFrontend) {
-		await setupPwa(projectDir);
+		await setupPwa(projectDir, frontends);
 	}
 	if (addons.includes("tauri") && hasWebFrontend) {
-		await setupTauri(projectDir, packageManager);
+		await setupTauri(projectDir, packageManager, frontends);
 	}
 	if (addons.includes("biome")) {
 		await setupBiome(projectDir);
@@ -34,6 +35,13 @@ export async function setupAddons(
 	}
 }
 
+export function getWebAppDir(
+	projectDir: string,
+	frontends: ProjectFrontend[],
+): string {
+	return path.join(projectDir, "apps/web");
+}
+
 async function setupBiome(projectDir: string) {
 	const biomeTemplateDir = path.join(PKG_ROOT, "template/with-biome");
 	if (await fs.pathExists(biomeTemplateDir)) {
@@ -88,13 +96,13 @@ async function setupHusky(projectDir: string) {
 	}
 }
 
-async function setupPwa(projectDir: string) {
+async function setupPwa(projectDir: string, frontends: ProjectFrontend[]) {
 	const pwaTemplateDir = path.join(PKG_ROOT, "template/with-pwa");
 	if (await fs.pathExists(pwaTemplateDir)) {
 		await fs.copy(pwaTemplateDir, projectDir, { overwrite: true });
 	}
 
-	const clientPackageDir = path.join(projectDir, "apps/web");
+	const clientPackageDir = getWebAppDir(projectDir, frontends);
 
 	if (!(await fs.pathExists(clientPackageDir))) {
 		return;
@@ -106,6 +114,64 @@ async function setupPwa(projectDir: string) {
 		projectDir: clientPackageDir,
 	});
 
+	const viteConfigPath = path.join(clientPackageDir, "vite.config.ts");
+	if (await fs.pathExists(viteConfigPath)) {
+		let viteConfig = await fs.readFile(viteConfigPath, "utf8");
+
+		if (!viteConfig.includes("vite-plugin-pwa")) {
+			const firstImportMatch = viteConfig.match(
+				/^import .* from ['"](.*)['"]/m,
+			);
+
+			if (firstImportMatch) {
+				viteConfig = viteConfig.replace(
+					firstImportMatch[0],
+					`import { VitePWA } from "vite-plugin-pwa";\n${firstImportMatch[0]}`,
+				);
+			} else {
+				viteConfig = `import { VitePWA } from "vite-plugin-pwa";\n${viteConfig}`;
+			}
+		}
+
+		const pwaPluginCode = `VitePWA({
+      registerType: "autoUpdate",
+      manifest: {
+        name: "My App",
+        short_name: "My App",
+        description: "My App",
+        theme_color: "#0c0c0c",
+      },
+      pwaAssets: {
+        disabled: false,
+        config: true,
+      },
+      devOptions: {
+        enabled: true,
+      },
+    })`;
+
+		if (!viteConfig.includes("VitePWA(")) {
+			if (frontends.includes("react-router")) {
+				viteConfig = viteConfig.replace(
+					/plugins: \[\s*tailwindcss\(\)/,
+					`plugins: [\n    tailwindcss(),\n    ${pwaPluginCode}`,
+				);
+			} else if (frontends.includes("tanstack-router")) {
+				viteConfig = viteConfig.replace(
+					/plugins: \[\s*tailwindcss\(\)/,
+					`plugins: [\n    tailwindcss(),\n    ${pwaPluginCode}`,
+				);
+			} else {
+				viteConfig = viteConfig.replace(
+					/plugins: \[/,
+					`plugins: [\n    ${pwaPluginCode},`,
+				);
+			}
+		}
+
+		await fs.writeFile(viteConfigPath, viteConfig);
+	}
+
 	const clientPackageJsonPath = path.join(clientPackageDir, "package.json");
 	if (await fs.pathExists(clientPackageJsonPath)) {
 		const packageJson = await fs.readJson(clientPackageJsonPath);

apps/cli/src/helpers/create-project.ts

@@ -62,6 +62,7 @@ export async function createProject(options: ProjectConfig): Promise<string> {
 			options.backend,
 			options.orm,
 			options.database,
+			options.frontend,
 		);
 		await setupAuth(projectDir, options.auth);
 

apps/cli/src/helpers/create-readme.ts

@@ -4,6 +4,7 @@ import type {
 	ProjectAddons,
 	ProjectConfig,
 	ProjectDatabase,
+	ProjectFrontend,
 	ProjectOrm,
 	ProjectRuntime,
 } from "../types";
@@ -28,18 +29,25 @@ function generateReadmeContent(options: ProjectConfig): string {
 		addons = [],
 		orm = "drizzle",
 		runtime = "bun",
+		frontend = ["tanstack-router"],
 	} = options;
 
+	const hasReactRouter = frontend.includes("react-router");
+	const hasTanstackRouter = frontend.includes("tanstack-router");
+	const hasNative = frontend.includes("native");
+
 	const packageManagerRunCmd =
 		packageManager === "npm" ? "npm run" : packageManager;
 
+	const port = hasReactRouter ? "5173" : "3001";
+
 	return `# ${projectName}
 
-This project was created with [Better-T-Stack](https://github.com/better-t-stack/Better-T-Stack), a modern TypeScript stack that combines React, TanStack Router, Hono, tRPC, and more.
+This project was created with [Better-T-Stack](https://github.com/better-t-stack/Better-T-Stack), a modern TypeScript stack that combines React, ${hasTanstackRouter ? "TanStack Router" : "React Router"}, Hono, tRPC, and more.
 
 ## Features
 
-${generateFeaturesList(database, auth, addons, orm, runtime)}
+${generateFeaturesList(database, auth, addons, orm, runtime, frontend)}
 
 ## Getting Started
 
@@ -57,21 +65,31 @@ Then, run the development server:
 ${packageManagerRunCmd} dev
 \`\`\`
 
-Open [http://localhost:3001](http://localhost:3001) in your browser to see the web application.
+${
+	hasTanstackRouter || hasReactRouter
+		? `Open [http://localhost:${port}](http://localhost:${port}) in your browser to see the web application.`
+		: ""
+}
+${hasNative ? "Use the Expo Go app to run the mobile application.\n" : ""}
 The API is running at [http://localhost:3000](http://localhost:3000).
 
+${
+	addons.includes("pwa") && hasReactRouter
+		? "\n## PWA Support with React Router v7\n\nThere is a known compatibility issue between VitePWA and React Router v7.\nSee: https://github.com/vite-pwa/vite-plugin-pwa/issues/809\n\nIf you encounter problems with the PWA functionality, you may need to manually modify\nthe service worker registration or consider waiting for a fix from VitePWA.\n"
+		: ""
+}
+
 ## Project Structure
 
 \`\`\`
 ${projectName}/
 ├── apps/
-│   ├── web/         # Frontend application (React, TanStack Router)
+${hasTanstackRouter || hasReactRouter ? `│   ├── web/         # Frontend application (React, ${hasTanstackRouter ? "TanStack Router" : "React Router"})\n` : ""}${hasNative ? "│   ├── native/      # Mobile application (React Native, Expo)\n" : ""}│   └── server/      # Backend API (Hono, tRPC)
-│   └── server/         # Backend API (Hono, tRPC)
 \`\`\`
 
 ## Available Scripts
 
-${generateScriptsList(packageManagerRunCmd, database, orm, auth)}
+${generateScriptsList(packageManagerRunCmd, database, orm, auth, hasNative)}
 `;
 }
 
@@ -81,16 +99,36 @@ function generateFeaturesList(
 	addons: ProjectAddons[],
 	orm: ProjectOrm,
 	runtime: ProjectRuntime,
+	frontend: ProjectFrontend[],
 ): string {
+	const hasTanstackRouter = frontend.includes("tanstack-router");
+	const hasReactRouter = frontend.includes("react-router");
+	const hasNative = frontend.includes("native");
+
 	const addonsList = [
 		"- **TypeScript** - For type safety and improved developer experience",
+	];
+
+	if (hasTanstackRouter) {
+		addonsList.push(
 			"- **TanStack Router** - File-based routing with full type safety",
+		);
+	} else if (hasReactRouter) {
+		addonsList.push("- **React Router** - Declarative routing for React");
+	}
+
+	if (hasNative) {
+		addonsList.push("- **React Native** - Build mobile apps using React");
+		addonsList.push("- **Expo** - Tools for React Native development");
+	}
+
+	addonsList.push(
 		"- **TailwindCSS** - Utility-first CSS for rapid UI development",
 		"- **shadcn/ui** - Reusable UI components",
 		"- **Hono** - Lightweight, performant server framework",
 		"- **tRPC** - End-to-end type-safe APIs",
 		`- **${runtime === "bun" ? "Bun" : "Node.js"}** - Runtime environment`,
-	];
+	);
 
 	if (database !== "none") {
 		addonsList.push(
@@ -172,6 +210,7 @@ function generateScriptsList(
 	database: ProjectDatabase,
 	orm: ProjectOrm,
 	auth: boolean,
+	hasNative: boolean,
 ): string {
 	let scripts = `- \`${packageManagerRunCmd} dev\`: Start both web and server in development mode
 - \`${packageManagerRunCmd} build\`: Build both web and server
@@ -179,6 +218,11 @@ function generateScriptsList(
 - \`${packageManagerRunCmd} dev:server\`: Start only the server
 - \`${packageManagerRunCmd} check-types\`: Check TypeScript types across all apps`;
 
+	if (hasNative) {
+		scripts += `
+- \`${packageManagerRunCmd} dev:native\`: Start the React Native/Expo development server`;
+	}
+
 	if (database !== "none") {
 		scripts += `
 - \`${packageManagerRunCmd} db:push\`: Push schema changes to database

apps/cli/src/helpers/env-setup.ts

@@ -17,7 +17,18 @@ export async function setupEnvironmentVariables(
 	}
 
 	if (!envContent.includes("CORS_ORIGIN")) {
-		envContent += "\nCORS_ORIGIN=http://localhost:3001";
+		const hasReactRouter = options.frontend.includes("react-router");
+		const hasTanStackRouter = options.frontend.includes("tanstack-router");
+
+		let corsOrigin = "http://localhost:3000";
+
+		if (hasReactRouter) {
+			corsOrigin = "http://localhost:5173";
+		} else if (hasTanStackRouter) {
+			corsOrigin = "http://localhost:3001";
+		}
+
+		envContent += `\nCORS_ORIGIN=${corsOrigin}`;
 	}
 
 	if (options.auth) {
@@ -55,20 +66,13 @@ export async function setupEnvironmentVariables(
 
 	await fs.writeFile(envPath, envContent.trim());
 
-	if (options.frontend.includes("web")) {
+	const hasReactRouter = options.frontend.includes("react-router");
+	const hasTanStackRouter = options.frontend.includes("tanstack-router");
+
+	if (hasReactRouter || hasTanStackRouter) {
 		const clientDir = path.join(projectDir, "apps/web");
-		const clientEnvPath = path.join(clientDir, ".env");
-		let clientEnvContent = "";
 
-		if (await fs.pathExists(clientEnvPath)) {
+		await setupClientEnvFile(clientDir);
-			clientEnvContent = await fs.readFile(clientEnvPath, "utf8");
-		}
-
-		if (!clientEnvContent.includes("VITE_SERVER_URL")) {
-			clientEnvContent += "VITE_SERVER_URL=http://localhost:3000\n";
-		}
-
-		await fs.writeFile(clientEnvPath, clientEnvContent.trim());
 	}
 
 	if (options.frontend.includes("native")) {
@@ -87,3 +91,18 @@ export async function setupEnvironmentVariables(
 		await fs.writeFile(nativeEnvPath, nativeEnvContent.trim());
 	}
 }
+
+async function setupClientEnvFile(clientDir: string) {
+	const clientEnvPath = path.join(clientDir, ".env");
+	let clientEnvContent = "";
+
+	if (await fs.pathExists(clientEnvPath)) {
+		clientEnvContent = await fs.readFile(clientEnvPath, "utf8");
+	}
+
+	if (!clientEnvContent.includes("VITE_SERVER_URL")) {
+		clientEnvContent += "VITE_SERVER_URL=http://localhost:3000\n";
+	}
+
+	await fs.writeFile(clientEnvPath, clientEnvContent.trim());
+}

apps/cli/src/helpers/examples-setup.ts

@@ -10,13 +10,20 @@ export async function setupExamples(
 	orm: ProjectOrm,
 	auth: boolean,
 	backend: ProjectBackend,
-	frontend: ProjectFrontend[] = ["web"],
+	frontend: ProjectFrontend[] = ["tanstack-router"],
 ): Promise<void> {
-	const hasWebFrontend = frontend.includes("web");
+	const hasTanstackRouter = frontend.includes("tanstack-router");
+	const hasReactRouter = frontend.includes("react-router");
+	const hasWebFrontend = hasTanstackRouter || hasReactRouter;
+
+	const routerType = hasTanstackRouter
+		? "web-tanstack-router"
+		: "web-react-router";
+
 	const webAppExists = await fs.pathExists(path.join(projectDir, "apps/web"));
 
 	if (examples.includes("todo") && hasWebFrontend && webAppExists) {
-		await setupTodoExample(projectDir, orm, auth);
+		await setupTodoExample(projectDir, orm, auth, routerType);
 	} else {
 		await cleanupTodoFiles(projectDir, orm);
 	}
@@ -27,17 +34,31 @@ export async function setupExamples(
 		hasWebFrontend &&
 		webAppExists
 	) {
-		await setupAIExample(projectDir);
+		await setupAIExample(projectDir, routerType);
 	}
 }
 
-async function setupAIExample(projectDir: string): Promise<void> {
+async function setupAIExample(
+	projectDir: string,
+	routerType: string,
+): Promise<void> {
 	const aiExampleDir = path.join(PKG_ROOT, "template/examples/ai");
 
 	if (await fs.pathExists(aiExampleDir)) {
-		await fs.copy(aiExampleDir, projectDir);
+		const aiRouteSourcePath = path.join(
+			aiExampleDir,
+			`apps/${routerType}/src/routes/ai.tsx`,
+		);
+		const aiRouteTargetPath = path.join(
+			projectDir,
+			"apps/web/src/routes/ai.tsx",
+		);
 
-		await updateHeaderWithAILink(projectDir);
+		if (await fs.pathExists(aiRouteSourcePath)) {
+			await fs.copy(aiRouteSourcePath, aiRouteTargetPath, { overwrite: true });
+		}
+
+		await updateHeaderWithAILink(projectDir, routerType);
 
 		const clientDir = path.join(projectDir, "apps/web");
 		addPackageDependency({
@@ -66,7 +87,7 @@ async function updateServerIndexWithAIRoute(projectDir: string): Promise<void> {
 			const importSection = `import { streamText } from "ai";\nimport { google } from "@ai-sdk/google";\nimport { stream } from "hono/streaming";`;
 
 			const aiRouteHandler = `
-app.post("/ai", async (c) => {
+      app.post("/ai", async (c) => {
         const body = await c.req.json();
         const messages = body.messages || [];
 
@@ -79,14 +100,14 @@ app.post("/ai", async (c) => {
         c.header("Content-Type", "text/plain; charset=utf-8");
 
         return stream(c, (stream) => stream.pipe(result.toDataStream()));
-});`;
+      });`;
 
 			if (indexContent.includes("import {")) {
 				const lastImportIndex = indexContent.lastIndexOf("import");
 				const endOfLastImport = indexContent.indexOf("\n", lastImportIndex);
 				indexContent = `${indexContent.substring(0, endOfLastImport + 1)}
-${importSection}
+        ${importSection}
-${indexContent.substring(endOfLastImport + 1)}`;
+        ${indexContent.substring(endOfLastImport + 1)}`;
 			} else {
 				indexContent = `${importSection}
 
@@ -118,7 +139,10 @@ ${aiRouteHandler}`;
 	}
 }
 
-async function updateHeaderWithAILink(projectDir: string): Promise<void> {
+async function updateHeaderWithAILink(
+	projectDir: string,
+	routerType: string,
+): Promise<void> {
 	const headerPath = path.join(
 		projectDir,
 		"apps/web/src/components/header.tsx",
@@ -127,37 +151,46 @@ async function updateHeaderWithAILink(projectDir: string): Promise<void> {
 	if (await fs.pathExists(headerPath)) {
 		let headerContent = await fs.readFile(headerPath, "utf8");
 
-		if (headerContent.includes('{ to: "/todos"')) {
+		const linksPattern = /const links = \[\s*([^;]*?)\s*\];/s;
-			headerContent = headerContent.replace(
+		const linksMatch = headerContent.match(linksPattern);
-				/{ to: "\/todos", label: "Todos" },/,
-				`{ to: "/todos", label: "Todos" },\n    { to: "/ai", label: "AI Chat" },`,
-			);
-		} else if (headerContent.includes('{ to: "/dashboard"')) {
-			headerContent = headerContent.replace(
-				/{ to: "\/dashboard", label: "Dashboard" },/,
-				`{ to: "/dashboard", label: "Dashboard" },\n    { to: "/ai", label: "AI Chat" },`,
-			);
-		} else {
-			headerContent = headerContent.replace(
-				/const links = \[\s*{ to: "\/", label: "Home" },/,
-				`const links = [\n    { to: "/", label: "Home" },\n    { to: "/ai", label: "AI Chat" },`,
-			);
-		}
 
+		if (linksMatch) {
+			const linksContent = linksMatch[1];
+			if (!linksContent.includes('"/ai"')) {
+				const updatedLinks = `const links = [\n    ${linksContent}${
+					linksContent.trim().endsWith(",") ? "" : ","
+				}\n    { to: "/ai", label: "AI Chat" },\n  ];`;
+
+				headerContent = headerContent.replace(linksPattern, updatedLinks);
 				await fs.writeFile(headerPath, headerContent);
 			}
+		}
+	}
 }
 
 async function setupTodoExample(
 	projectDir: string,
 	orm: ProjectOrm,
 	auth: boolean,
+	routerType: string,
 ): Promise<void> {
 	const todoExampleDir = path.join(PKG_ROOT, "template/examples/todo");
+
 	if (await fs.pathExists(todoExampleDir)) {
-		const todoRouteDir = path.join(todoExampleDir, "apps/web/src/routes");
+		const todoRouteSourceDir = path.join(
-		const targetRouteDir = path.join(projectDir, "apps/web/src/routes");
+			todoExampleDir,
-		await fs.copy(todoRouteDir, targetRouteDir, { overwrite: true });
+			`apps/${routerType}/src/routes/todos.tsx`,
+		);
+		const todoRouteTargetPath = path.join(
+			projectDir,
+			"apps/web/src/routes/todos.tsx",
+		);
+
+		if (await fs.pathExists(todoRouteSourceDir)) {
+			await fs.copy(todoRouteSourceDir, todoRouteTargetPath, {
+				overwrite: true,
+			});
+		}
 
 		if (orm !== "none") {
 			const todoRouterSourceFile = path.join(
@@ -174,16 +207,51 @@ async function setupTodoExample(
 					overwrite: true,
 				});
 			}
+
+			await updateRouterIndexToIncludeTodo(projectDir);
 		}
 
-		await updateHeaderWithTodoLink(projectDir, auth);
+		await updateHeaderWithTodoLink(projectDir, routerType);
-		await addTodoButtonToHomepage(projectDir);
+	}
+}
+
+async function updateRouterIndexToIncludeTodo(
+	projectDir: string,
+): Promise<void> {
+	const routerFile = path.join(projectDir, "apps/server/src/routers/index.ts");
+
+	if (await fs.pathExists(routerFile)) {
+		let routerContent = await fs.readFile(routerFile, "utf8");
+
+		if (!routerContent.includes("import { todoRouter }")) {
+			const lastImportIndex = routerContent.lastIndexOf("import");
+			const endOfImports = routerContent.indexOf("\n\n", lastImportIndex);
+
+			if (endOfImports !== -1) {
+				routerContent = `${routerContent.slice(0, endOfImports)}
+import { todoRouter } from "./todo";${routerContent.slice(endOfImports)}`;
+			} else {
+				routerContent = `import { todoRouter } from "./todo";\n${routerContent}`;
+			}
+
+			const routerDefIndex = routerContent.indexOf(
+				"export const appRouter = router({",
+			);
+			if (routerDefIndex !== -1) {
+				const routerContentStart =
+					routerContent.indexOf("{", routerDefIndex) + 1;
+				routerContent = `${routerContent.slice(0, routerContentStart)}
+  todo: todoRouter,${routerContent.slice(routerContentStart)}`;
+			}
+
+			await fs.writeFile(routerFile, routerContent);
+		}
 	}
 }
 
 async function updateHeaderWithTodoLink(
 	projectDir: string,
-	auth: boolean,
+	routerType: string,
 ): Promise<void> {
 	const headerPath = path.join(
 		projectDir,
@@ -193,20 +261,21 @@ async function updateHeaderWithTodoLink(
 	if (await fs.pathExists(headerPath)) {
 		let headerContent = await fs.readFile(headerPath, "utf8");
 
-		if (auth) {
+		const linksPattern = /const links = \[\s*([^;]*?)\s*\];/s;
-			headerContent = headerContent.replace(
+		const linksMatch = headerContent.match(linksPattern);
-				/const links = \[\s*{ to: "\/", label: "Home" },\s*{ to: "\/dashboard", label: "Dashboard" },/,
-				`const links = [\n    { to: "/", label: "Home" },\n    { to: "/dashboard", label: "Dashboard" },\n    { to: "/todos", label: "Todos" },`,
-			);
-		} else {
-			headerContent = headerContent.replace(
-				/const links = \[\s*{ to: "\/", label: "Home" },/,
-				`const links = [\n    { to: "/", label: "Home" },\n    { to: "/todos", label: "Todos" },`,
-			);
-		}
 
+		if (linksMatch) {
+			const linksContent = linksMatch[1];
+			if (!linksContent.includes('"/todos"')) {
+				const updatedLinks = `const links = [\n    ${linksContent}${
+					linksContent.trim().endsWith(",") ? "" : ","
+				}\n    { to: "/todos", label: "Todos" },\n  ];`;
+
+				headerContent = headerContent.replace(linksPattern, updatedLinks);
 				await fs.writeFile(headerPath, headerContent);
 			}
+		}
+	}
 }
 
 async function cleanupTodoFiles(
@@ -255,25 +324,3 @@ async function updateRouterIndex(projectDir: string): Promise<void> {
 		await fs.writeFile(routerFile, routerContent);
 	}
 }
-
-async function addTodoButtonToHomepage(projectDir: string): Promise<void> {
-	const indexPath = path.join(projectDir, "apps/web/src/routes/index.tsx");
-
-	if (await fs.pathExists(indexPath)) {
-		let indexContent = await fs.readFile(indexPath, "utf8");
-
-		indexContent = indexContent.replace(
-			/<div id="buttons"><\/div>/,
-			`<div id="buttons" className="mt-4 flex flex-col gap-4 sm:flex-row sm:items-center">
-        <Button asChild>
-          <Link to="/todos" className="flex items-center">
-            View Todo Demo
-            <ArrowRight className="ml-1 h-4 w-4" />
-          </Link>
-        </Button>
-      </div>`,
-		);
-
-		await fs.writeFile(indexPath, indexContent);
-	}
-}

apps/cli/src/helpers/post-installation.ts

@@ -37,8 +37,14 @@ export function displayPostInstallInstructions(
 	const nativeInstructions = frontends?.includes("native")
 		? getNativeInstructions()
 		: "";
+	const pwaInstructions =
+		addons?.includes("pwa") && frontends?.includes("react-router")
+			? getPwaInstructions()
+			: "";
 
-	const hasWebFrontend = frontends?.includes("web");
+	const hasTanstackRouter = frontends?.includes("tanstack-router");
+	const hasReactRouter = frontends?.includes("react-router");
+	const hasWebFrontend = hasTanstackRouter || hasReactRouter;
 	const hasNativeFrontend = frontends?.includes("native");
 	const hasFrontend = hasWebFrontend || hasNativeFrontend;
 
@@ -49,10 +55,10 @@ ${!depsInstalled ? `${pc.cyan("2.")} ${packageManager} install\n` : ""}${pc.cyan
 ${pc.bold("Your project will be available at:")}
 ${
 	hasFrontend
-		? `${hasWebFrontend ? `${pc.cyan("•")} Frontend: http://localhost:3001\n` : ""}`
+		? `${hasWebFrontend ? `${pc.cyan("•")} Frontend: http://localhost:${hasReactRouter ? "5173" : "3001"}\n` : ""}`
 		: `${pc.yellow("NOTE:")} You are creating a backend-only app (no frontend selected)\n`
 }${pc.cyan("•")} API: http://localhost:3000
-${nativeInstructions ? `\n${nativeInstructions.trim()}` : ""}${databaseInstructions ? `\n${databaseInstructions.trim()}` : ""}${tauriInstructions ? `\n${tauriInstructions.trim()}` : ""}${lintingInstructions ? `\n${lintingInstructions.trim()}` : ""}`,
+${nativeInstructions ? `\n${nativeInstructions.trim()}` : ""}${databaseInstructions ? `\n${databaseInstructions.trim()}` : ""}${tauriInstructions ? `\n${tauriInstructions.trim()}` : ""}${lintingInstructions ? `\n${lintingInstructions.trim()}` : ""}${pwaInstructions ? `\n${pwaInstructions.trim()}` : ""}`,
 		"Next steps",
 	);
 }
@@ -105,5 +111,9 @@ function getDatabaseInstructions(
 }
 
 function getTauriInstructions(runCmd?: string): string {
-	return `${pc.bold("Desktop app with Tauri:")}\n${pc.cyan("•")} Start desktop app: ${`cd apps/web && ${runCmd} desktop:dev`}\n${pc.cyan("•")} Build desktop app: ${`cd apps/web && ${runCmd} desktop:build`}\n${pc.yellow("NOTE:")} Tauri requires Rust and platform-specific dependencies. See: ${"https://v2.tauri.app/start/prerequisites/"}\n\n`;
+	return `\n${pc.bold("Desktop app with Tauri:")}\n${pc.cyan("•")} Start desktop app: ${`cd apps/web && ${runCmd} desktop:dev`}\n${pc.cyan("•")} Build desktop app: ${`cd apps/web && ${runCmd} desktop:build`}\n${pc.yellow("NOTE:")} Tauri requires Rust and platform-specific dependencies.\nSee: ${"https://v2.tauri.app/start/prerequisites/"}\n\n`;
+}
+
+function getPwaInstructions(): string {
+	return `${pc.bold("PWA with React Router v7:")}\n${pc.yellow("NOTE:")} There is a known compatibility issue between VitePWA and React Router v7.\nSee: https://github.com/vite-pwa/vite-plugin-pwa/issues/809\n`;
 }

apps/cli/src/helpers/tauri-setup.ts

@@ -1,14 +1,15 @@
 import path from "node:path";
 import { log, spinner } from "@clack/prompts";
-import { $, execa } from "execa";
+import { execa } from "execa";
 import fs from "fs-extra";
 import pc from "picocolors";
-import type { ProjectPackageManager } from "../types";
+import type { ProjectFrontend, ProjectPackageManager } from "../types";
 import { addPackageDependency } from "../utils/add-package-deps";
 
 export async function setupTauri(
 	projectDir: string,
 	packageManager: ProjectPackageManager,
+	frontends: ProjectFrontend[],
 ): Promise<void> {
 	const s = spinner();
 	const clientPackageDir = path.join(projectDir, "apps/web");
@@ -60,13 +61,18 @@ export async function setupTauri(
 				args = ["@tauri-apps/cli@latest"];
 		}
 
+		const hasReactRouter = frontends.includes("react-router");
+		const devUrl = hasReactRouter
+			? "http://localhost:5173"
+			: "http://localhost:3001";
+
 		args = [
 			...args,
 			"init",
 			`--app-name=${path.basename(projectDir)}`,
 			`--window-title=${path.basename(projectDir)}`,
 			"--frontend-dist=dist",
-			"--dev-url=http://localhost:3001",
+			`--dev-url=${devUrl}`,
 			`--before-dev-command=${packageManager} run dev`,
 			`--before-build-command=${packageManager} run build`,
 		];

apps/cli/src/helpers/template-manager.ts

@@ -8,31 +8,86 @@ import type {
 	ProjectOrm,
 } from "../types";
 
+/**
+ * Copy base template structure but exclude app-specific folders that will be added based on options
+ */
 export async function copyBaseTemplate(projectDir: string): Promise<void> {
 	const templateDir = path.join(PKG_ROOT, "template/base");
+
 	if (!(await fs.pathExists(templateDir))) {
 		throw new Error(`Template directory not found: ${templateDir}`);
 	}
-	await fs.copy(templateDir, projectDir);
+
+	await fs.ensureDir(projectDir);
+
+	const rootFiles = await fs.readdir(templateDir);
+	for (const file of rootFiles) {
+		const srcPath = path.join(templateDir, file);
+		const destPath = path.join(projectDir, file);
+
+		if (file === "apps") continue;
+
+		if (await fs.stat(srcPath).then((stat) => stat.isDirectory())) {
+			await fs.copy(srcPath, destPath);
+		} else {
+			await fs.copy(srcPath, destPath);
+		}
+	}
+
+	await fs.ensureDir(path.join(projectDir, "apps"));
+
+	const serverSrcDir = path.join(templateDir, "apps/server");
+	const serverDestDir = path.join(projectDir, "apps/server");
+	if (await fs.pathExists(serverSrcDir)) {
+		await fs.copy(serverSrcDir, serverDestDir);
+	}
 }
 
 export async function setupFrontendTemplates(
 	projectDir: string,
 	frontends: ProjectFrontend[],
 ): Promise<void> {
-	if (!frontends.includes("web")) {
+	const hasTanstackWeb = frontends.includes("tanstack-router");
+	const hasReactRouterWeb = frontends.includes("react-router");
+	const hasNative = frontends.includes("native");
+
+	if (hasTanstackWeb || hasReactRouterWeb) {
 		const webDir = path.join(projectDir, "apps/web");
-		if (await fs.pathExists(webDir)) {
+		await fs.ensureDir(webDir);
-			await fs.remove(webDir);
+
+		const webBaseDir = path.join(PKG_ROOT, "template/base/apps/web-base");
+		if (await fs.pathExists(webBaseDir)) {
+			await fs.copy(webBaseDir, webDir);
+		}
+
+		const frameworkName = hasTanstackWeb
+			? "web-tanstack-router"
+			: "web-react-router";
+		const webFrameworkDir = path.join(
+			PKG_ROOT,
+			`template/base/apps/${frameworkName}`,
+		);
+
+		if (await fs.pathExists(webFrameworkDir)) {
+			await fs.copy(webFrameworkDir, webDir, { overwrite: true });
+		}
+
+		const packageJsonPath = path.join(webDir, "package.json");
+		if (await fs.pathExists(packageJsonPath)) {
+			const packageJson = await fs.readJson(packageJsonPath);
+			packageJson.name = "web";
+			await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
 		}
 	}
 
-	if (!frontends.includes("native")) {
+	if (hasNative) {
-		const nativeDir = path.join(projectDir, "apps/native");
+		const nativeSrcDir = path.join(PKG_ROOT, "template/base/apps/native");
-		if (await fs.pathExists(nativeDir)) {
+		const nativeDestDir = path.join(projectDir, "apps/native");
-			await fs.remove(nativeDir);
+
+		if (await fs.pathExists(nativeSrcDir)) {
+			await fs.copy(nativeSrcDir, nativeDestDir);
 		}
-	} else {
+
 		await fs.writeFile(
 			path.join(projectDir, ".npmrc"),
 			"node-linker=hoisted\n",
@@ -91,14 +146,43 @@ export async function setupAuthTemplate(
 	framework: ProjectBackend,
 	orm: ProjectOrm,
 	database: ProjectDatabase,
+	frontends: ProjectFrontend[],
 ): Promise<void> {
 	if (!auth) return;
 
 	const authTemplateDir = path.join(PKG_ROOT, "template/with-auth");
 	if (await fs.pathExists(authTemplateDir)) {
-		const clientAuthDir = path.join(authTemplateDir, "apps/web");
+		const hasReactRouter = frontends.includes("react-router");
-		const projectClientDir = path.join(projectDir, "apps/web");
+		const hasTanStackRouter = frontends.includes("tanstack-router");
-		await fs.copy(clientAuthDir, projectClientDir, { overwrite: true });
+
+		if (hasReactRouter || hasTanStackRouter) {
+			const webDir = path.join(projectDir, "apps/web");
+
+			const webBaseAuthDir = path.join(authTemplateDir, "apps/web-base");
+			if (await fs.pathExists(webBaseAuthDir)) {
+				await fs.copy(webBaseAuthDir, webDir, { overwrite: true });
+			}
+
+			if (hasReactRouter) {
+				const reactRouterAuthDir = path.join(
+					authTemplateDir,
+					"apps/web-react-router",
+				);
+				if (await fs.pathExists(reactRouterAuthDir)) {
+					await fs.copy(reactRouterAuthDir, webDir, { overwrite: true });
+				}
+			}
+
+			if (hasTanStackRouter) {
+				const tanstackAuthDir = path.join(
+					authTemplateDir,
+					"apps/web-tanstack-router",
+				);
+				if (await fs.pathExists(tanstackAuthDir)) {
+					await fs.copy(tanstackAuthDir, webDir, { overwrite: true });
+				}
+			}
+		}
 
 		const serverAuthDir = path.join(authTemplateDir, "apps/server/src");
 		const projectServerDir = path.join(projectDir, "apps/server/src");
@@ -141,25 +225,55 @@ export async function setupAuthTemplate(
 				);
 			}
 		}
+
+		if (frontends.includes("native")) {
+			const nativeAuthDir = path.join(authTemplateDir, "apps/native");
+			const projectNativeDir = path.join(projectDir, "apps/native");
+
+			if (await fs.pathExists(nativeAuthDir)) {
+				await fs.copy(nativeAuthDir, projectNativeDir, { overwrite: true });
+			}
+		}
 	}
 }
 
 export async function fixGitignoreFiles(projectDir: string): Promise<void> {
-	const gitignorePaths = [
+	const gitignorePaths = await findGitignoreFiles(projectDir);
-		path.join(projectDir, "_gitignore"),
-		path.join(projectDir, "apps/web/_gitignore"),
-		path.join(projectDir, "apps/native/_gitignore"),
-		path.join(projectDir, "apps/server/_gitignore"),
-	];
 
 	for (const gitignorePath of gitignorePaths) {
 		if (await fs.pathExists(gitignorePath)) {
 			const targetPath = path.join(path.dirname(gitignorePath), ".gitignore");
-			await fs.move(gitignorePath, targetPath);
+			await fs.move(gitignorePath, targetPath, { overwrite: true });
 		}
 	}
 }
 
+/**
+ * Find all _gitignore files in the project recursively
+ */
+async function findGitignoreFiles(dir: string): Promise<string[]> {
+	const gitignoreFiles: string[] = [];
+
+	const gitignorePath = path.join(dir, "_gitignore");
+	if (await fs.pathExists(gitignorePath)) {
+		gitignoreFiles.push(gitignorePath);
+	}
+
+	try {
+		const entries = await fs.readdir(dir, { withFileTypes: true });
+
+		for (const entry of entries) {
+			if (entry.isDirectory() && entry.name !== "node_modules") {
+				const subDirPath = path.join(dir, entry.name);
+				const subDirFiles = await findGitignoreFiles(subDirPath);
+				gitignoreFiles.push(...subDirFiles);
+			}
+		}
+	} catch (error) {}
+
+	return gitignoreFiles;
+}
+
 function getOrmTemplateDir(orm: ProjectOrm, database: ProjectDatabase): string {
 	if (orm === "drizzle") {
 		return database === "sqlite"

apps/cli/src/index.ts

@@ -41,7 +41,10 @@ async function main() {
 		.option("--orm <type>", "ORM type (none, drizzle, prisma)")
 		.option("--auth", "Include authentication")
 		.option("--no-auth", "Exclude authentication")
-		.option("--frontend <types...>", "Frontend types (web, native, none)")
+		.option(
+			"--frontend <types...>",
+			"Frontend types (tanstack-router, react-router, native, none)",
+		)
 		.option(
 			"--addons <types...>",
 			"Additional addons (pwa, tauri, biome, husky, none)",
@@ -251,7 +254,9 @@ function validateOptions(options: CLIOptions): void {
 
 		if (
 			options.frontend &&
-			!options.frontend.includes("web") &&
+			!options.frontend.some((f) =>
+				["tanstack-router", "react-router"].includes(f),
+			) &&
 			!options.frontend.includes("none")
 		) {
 			cancel(
@@ -264,7 +269,12 @@ function validateOptions(options: CLIOptions): void {
 	}
 
 	if (options.frontend && options.frontend.length > 0) {
-		const validFrontends = ["web", "native", "none"];
+		const validFrontends = [
+			"tanstack-router",
+			"react-router",
+			"native",
+			"none",
+		];
 		const invalidFrontends = options.frontend.filter(
 			(frontend: string) => !validFrontends.includes(frontend),
 		);
@@ -278,6 +288,19 @@ function validateOptions(options: CLIOptions): void {
 			process.exit(1);
 		}
 
+		const webFrontends = options.frontend.filter(
+			(f) => f === "tanstack-router" || f === "react-router",
+		);
+
+		if (webFrontends.length > 1) {
+			cancel(
+				pc.red(
+					"Cannot select multiple web frameworks. Choose only one of: tanstack-router, react-router",
+				),
+			);
+			process.exit(1);
+		}
+
 		if (options.frontend.includes("none") && options.frontend.length > 1) {
 			cancel(pc.red(`Cannot combine 'none' with other frontend options.`));
 			process.exit(1);
@@ -316,7 +339,9 @@ function validateOptions(options: CLIOptions): void {
 		if (
 			hasWebSpecificAddons &&
 			options.frontend &&
-			!options.frontend.includes("web") &&
+			!options.frontend.some((f) =>
+				["tanstack-router", "react-router"].includes(f),
+			) &&
 			!options.frontend.includes("none")
 		) {
 			cancel(
@@ -336,13 +361,26 @@ function processFlags(
 	projectDirectory?: string,
 ): Partial<ProjectConfig> {
 	let frontend: ProjectFrontend[] | undefined = undefined;
+
 	if (options.frontend) {
 		if (options.frontend.includes("none")) {
 			frontend = [];
 		} else {
 			frontend = options.frontend.filter(
-				(f): f is ProjectFrontend => f === "web" || f === "native",
+				(f): f is ProjectFrontend =>
+					f === "tanstack-router" || f === "react-router" || f === "native",
 			);
+
+			const webFrontends = frontend.filter(
+				(f) => f === "tanstack-router" || f === "react-router",
+			);
+
+			if (webFrontends.length > 1) {
+				const firstWebFrontend = webFrontends[0];
+				frontend = frontend.filter(
+					(f) => f === "native" || f === firstWebFrontend,
+				);
+			}
 		}
 	}
 
@@ -371,7 +409,12 @@ function processFlags(
 				(ex): ex is ProjectExamples => ex === "todo" || ex === "ai",
 			);
 
-			if (frontend && frontend.length > 0 && !frontend.includes("web")) {
+			if (
+				frontend &&
+				frontend.length > 0 &&
+				!frontend.includes("tanstack-router") &&
+				!frontend.includes("react-router")
+			) {
 				examples = [];
 				log.warn(
 					pc.yellow("Examples require web frontend - ignoring examples flag"),
@@ -402,7 +445,12 @@ function processFlags(
 					addon === "husky",
 			);
 
-			if (frontend && frontend.length > 0 && !frontend.includes("web")) {
+			if (
+				frontend &&
+				frontend.length > 0 &&
+				!frontend.includes("tanstack-router") &&
+				!frontend.includes("react-router")
+			) {
 				addons = addons.filter((addon) => !["pwa", "tauri"].includes(addon));
 				if (addons.length !== options.addons.length) {
 					log.warn(

apps/cli/src/prompts/addons.ts

@@ -9,7 +9,9 @@ export async function getAddonsChoice(
 ): Promise<ProjectAddons[]> {
 	if (Addons !== undefined) return Addons;
 
-	const hasWeb = frontends?.includes("web");
+	const hasWeb =
+		frontends?.includes("react-router") ||
+		frontends?.includes("tanstack-router");
 
 	const addonOptions = [
 		{

apps/cli/src/prompts/auth.ts

@@ -11,7 +11,9 @@ export async function getAuthChoice(
 	if (!hasDatabase) return false;
 
 	const hasNative = frontends?.includes("native");
-	const hasWeb = frontends?.includes("web");
+	const hasWeb =
+		frontends?.includes("tanstack-router") ||
+		frontends?.includes("react-router");
 
 	if (hasNative) {
 		log.warn(

apps/cli/src/prompts/examples.ts

@@ -18,7 +18,10 @@ export async function getExamplesChoice(
 
 	if (database === "none") return [];
 
-	const hasWebFrontend = frontends?.includes("web");
+	const hasWebFrontend =
+		frontends?.includes("react-router") ||
+		frontends?.includes("tanstack-router");
+
 	if (!hasWebFrontend) return [];
 
 	let response: ProjectExamples[] | symbol = [];

apps/cli/src/prompts/frontend-option.ts

@@ -1,4 +1,4 @@
-import { cancel, isCancel, multiselect } from "@clack/prompts";
+import { cancel, isCancel, multiselect, select } from "@clack/prompts";
 import pc from "picocolors";
 import { DEFAULT_CONFIG } from "../constants";
 import type { ProjectFrontend } from "../types";
@@ -8,28 +8,66 @@ export async function getFrontendChoice(
 ): Promise<ProjectFrontend[]> {
 	if (frontendOptions !== undefined) return frontendOptions;
 
-	const response = await multiselect<ProjectFrontend>({
+	const frontendTypes = await multiselect({
-		message: "Choose frontends",
+		message: "Select platforms to develop for",
 		options: [
 			{
 				value: "web",
-				label: "Web App",
+				label: "Web",
-				hint: "React + TanStack Router web application",
+				hint: "React Web Application",
 			},
 			{
 				value: "native",
-				label: "Native App",
+				label: "Native",
-				hint: "React Native + Expo application",
+				hint: "Create a React Native/Expo app",
 			},
 		],
-		initialValues: DEFAULT_CONFIG.frontend,
+		initialValues: DEFAULT_CONFIG.frontend.some(
-		required: false,
+			(f) => f === "tanstack-router" || f === "react-router",
+		)
+			? ["web"]
+			: [],
 	});
 
-	if (isCancel(response)) {
+	if (isCancel(frontendTypes)) {
 		cancel(pc.red("Operation cancelled"));
 		process.exit(0);
 	}
 
-	return response;
+	const result: ProjectFrontend[] = [];
+
+	if (frontendTypes.includes("web")) {
+		const webFramework = await select<ProjectFrontend>({
+			message: "Choose frontend framework",
+			options: [
+				{
+					value: "tanstack-router",
+					label: "TanStack Router",
+					hint: "Modern and scalable routing for React Applications",
+				},
+				{
+					value: "react-router",
+					label: "React Router",
+					hint: "A user‑obsessed, standards‑focused, multi‑strategy router you can deploy anywhere.",
+				},
+			],
+			initialValue:
+				DEFAULT_CONFIG.frontend.find(
+					(f) => f === "tanstack-router" || f === "react-router",
+				) || "tanstack-router",
+		});
+
+		if (isCancel(webFramework)) {
+			cancel(pc.red("Operation cancelled"));
+			process.exit(0);
+		}
+
+		result.push(webFramework);
+	}
+
+	if (frontendTypes.includes("native")) {
+		result.push("native");
+	}
+
+	return result;
 }

apps/cli/src/types.ts

@@ -5,7 +5,7 @@ export type ProjectAddons = "pwa" | "biome" | "tauri" | "husky";
 export type ProjectBackend = "hono" | "elysia";
 export type ProjectRuntime = "node" | "bun";
 export type ProjectExamples = "todo" | "ai";
-export type ProjectFrontend = "web" | "native";
+export type ProjectFrontend = "react-router" | "tanstack-router" | "native";
 
 export interface ProjectConfig {
 	projectName: string;

apps/cli/template/base/apps/web-base/_gitignore

@@ -21,3 +21,6 @@ dist/
 !.env.example
 
 dev-dist
+
+/.react-router/
+/build/

apps/cli/template/base/apps/web-base/components.json

@@ -4,7 +4,7 @@
   "rsc": false,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "",
     "css": "src/index.css",
     "baseColor": "neutral",
     "cssVariables": true,

apps/cli/template/base/apps/web-base/src/components/mode-toggle.tsx

@@ -10,7 +10,7 @@ import {
 import { useTheme } from "@/components/theme-provider";
 
 export function ModeToggle() {
-  const { setTheme, theme } = useTheme();
+  const { setTheme } = useTheme();
 
   return (
     <DropdownMenu>

apps/cli/template/base/apps/web-base/src/components/theme-provider.tsx

@@ -27,7 +27,7 @@ export function ThemeProvider({
   ...props
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
   );
 
   useEffect(() => {

apps/cli/template/base/apps/web-base/src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

apps/cli/template/base/apps/web-base/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -12,7 +12,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -35,7 +35,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("leading-none font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
@@ -45,7 +45,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
@@ -58,7 +58,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -68,7 +68,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("px-6", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -78,7 +78,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -89,4 +89,4 @@ export {
   CardAction,
   CardDescription,
   CardContent,
-}
+};

apps/cli/template/base/apps/web-base/src/components/ui/checkbox.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
+import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react"
+import { CheckIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Checkbox({
   className,
@@ -24,7 +24,7 @@ function Checkbox({
         <CheckIcon className="size-3.5" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  )
+  );
 }
 
-export { Checkbox }
+export { Checkbox };

apps/cli/template/base/apps/web-base/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,255 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

apps/cli/template/base/apps/web-base/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

apps/cli/template/base/apps/web-base/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

apps/cli/template/base/apps/web-base/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

apps/cli/template/base/apps/web-base/src/components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

apps/cli/template/base/apps/web-base/src/index.css

@@ -0,0 +1,134 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+html,
+body {
+  @apply bg-white dark:bg-gray-950;
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+  }
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

apps/cli/template/base/apps/web-react-router/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "web",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@react-router/fs-routes": "^7.4.1",
+    "@react-router/node": "^7.4.1",
+    "@react-router/serve": "^7.4.1",
+    "@tanstack/react-form": "^1.2.3",
+    "@tanstack/react-query": "^5.71.3",
+    "@trpc/client": "^11.0.1",
+    "@trpc/server": "^11.0.1",
+    "@trpc/tanstack-react-query": "^11.0.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "isbot": "^5.1.17",
+    "lucide-react": "^0.487.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.4.1",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.1.0",
+    "tw-animate-css": "^1.2.5"
+  },
+  "devDependencies": {
+    "@react-router/dev": "^7.4.1",
+    "@tailwindcss/vite": "^4.0.0",
+    "@tanstack/react-query-devtools": "^5.71.3",
+    "@types/node": "^20",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
+    "react-router-devtools": "^1.1.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

apps/cli/template/base/apps/web-react-router/react-router.config.ts

@@ -0,0 +1,6 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  ssr: false,
+  appDirectory: "src",
+} satisfies Config;

apps/cli/template/base/apps/web-react-router/src/components/header.tsx

@@ -0,0 +1,31 @@
+import { NavLink } from "react-router";
+import { ModeToggle } from "./mode-toggle";
+
+export default function Header() {
+  const links = [
+    { to: "/", label: "Home" },
+  ];
+
+  return (
+    <div>
+      <div className="flex flex-row items-center justify-between px-2 py-1">
+        <nav className="flex gap-4 text-lg">
+          {links.map(({ to, label }) => (
+            <NavLink
+              key={to}
+              to={to}
+              className={({ isActive }) => (isActive ? "font-bold" : "")}
+              end
+            >
+              {label}
+            </NavLink>
+          ))}
+        </nav>
+        <div className="flex items-center gap-2">
+          <ModeToggle />
+        </div>
+      </div>
+      <hr />
+    </div>
+  );
+}

apps/cli/template/base/apps/web-react-router/src/root.tsx

@@ -0,0 +1,91 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "react-router";
+import type { Route } from "./+types/root";
+import "./index.css";
+import Header from "./components/header";
+import { ThemeProvider } from "./components/theme-provider";
+import { queryClient } from "./utils/trpc";
+import { Toaster } from "./components/ui/sonner";
+
+export const links: Route.LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous",
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+  },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+        <div className="grid grid-rows-[auto_1fr] h-svh">
+          <Header />
+          <Outlet />
+        </div>
+        <Toaster richColors />
+      </ThemeProvider>
+      <ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
+    </QueryClientProvider>
+  );
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error";
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="pt-16 p-4 container mx-auto">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

apps/cli/template/base/apps/web-react-router/src/routes.ts

@@ -0,0 +1,4 @@
+import { type RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default flatRoutes() satisfies RouteConfig;

apps/cli/template/base/apps/web-react-router/src/routes/_index.tsx

@@ -0,0 +1,89 @@
+import type { Route } from "./+types/_index";
+import { trpc } from "@/utils/trpc";
+import { useQuery } from "@tanstack/react-query";
+
+const TITLE_TEXT = `
+ ██████╗ ███████╗████████╗████████╗███████╗██████╗
+ ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
+ ██████╔╝█████╗     ██║      ██║   █████╗  ██████╔╝
+ ██╔══██╗██╔══╝     ██║      ██║   ██╔══╝  ██╔══██╗
+ ██████╔╝███████╗   ██║      ██║   ███████╗██║  ██║
+ ╚═════╝ ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚═╝  ╚═╝
+
+ ████████╗    ███████╗████████╗ █████╗  ██████╗██╗  ██╗
+ ╚══██╔══╝    ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
+    ██║       ███████╗   ██║   ███████║██║     █████╔╝
+    ██║       ╚════██║   ██║   ██╔══██║██║     ██╔═██╗
+    ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗
+    ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
+ `;
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: "My App" }, { name: "description", content: "My App" }];
+}
+
+export default function Home() {
+  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+
+  return (
+    <div className="container mx-auto max-w-3xl px-4 py-2">
+      <pre className="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
+      <div className="grid gap-6">
+        <section className="rounded-lg border p-4">
+          <h2 className="mb-2 font-medium">API Status</h2>
+          <div className="flex items-center gap-2">
+            <div
+              className={`h-2 w-2 rounded-full ${
+                healthCheck.data ? "bg-green-500" : "bg-red-500"
+              }`}
+            />
+            <span className="text-sm text-muted-foreground">
+              {healthCheck.isLoading
+                ? "Checking..."
+                : healthCheck.data
+                ? "Connected"
+                : "Disconnected"}
+            </span>
+          </div>
+        </section>
+
+        <section>
+          <h2 className="mb-3 font-medium">Core Features</h2>
+          <ul className="grid grid-cols-2 gap-3">
+            <FeatureItem
+              title="Type-Safe API"
+              description="End-to-end type safety with tRPC"
+            />
+            <FeatureItem
+              title="Modern React"
+              description="TanStack Router + TanStack Query"
+            />
+            <FeatureItem
+              title="Fast Backend"
+              description="Lightweight Hono server"
+            />
+            <FeatureItem
+              title="Beautiful UI"
+              description="TailwindCSS + shadcn/ui components"
+            />
+          </ul>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function FeatureItem({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <li className="border-l-2 border-primary py-1 pl-3">
+      <h3 className="font-medium">{title}</h3>
+      <p className="text-sm text-muted-foreground">{description}</p>
+    </li>
+  );
+}

apps/cli/template/base/apps/web-react-router/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "include": [
+    "**/*",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}

apps/cli/template/base/apps/web-react-router/vite.config.ts

@@ -0,0 +1,8 @@
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+});

apps/cli/template/base/apps/web-tanstack-router/package.json

@@ -44,7 +44,7 @@
 		"react-dom": "^19.0.0",
 		"sonner": "^1.7.4",
 		"tailwind-merge": "^2.6.0",
-		"tailwindcss-animate": "^1.0.7",
+		"tw-animate-css": "^1.2.5",
 		"zod": "^3.24.2"
 	}
 }

apps/cli/template/base/apps/web-tanstack-router/src/routes/index.tsx

@@ -1,8 +1,6 @@
-import { Button } from "@/components/ui/button";
 import { trpc } from "@/utils/trpc";
 import { useQuery } from "@tanstack/react-query";
-import { Link, createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
-import { ArrowRight } from "lucide-react";
 
 export const Route = createFileRoute("/")({
   component: HomeComponent,
@@ -68,7 +66,6 @@ function HomeComponent() {
             />
           </ul>
         </section>
-        <div id="buttons" />
       </div>
     </div>
   );

apps/cli/template/base/apps/web/src/components/ui/button.tsx

@@ -1,57 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }

apps/cli/template/base/apps/web/src/components/ui/dropdown-menu.tsx

@@ -1,199 +0,0 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}

apps/cli/template/base/apps/web/src/components/ui/input.tsx

@@ -1,22 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
-
-export { Input }

apps/cli/template/base/apps/web/src/components/ui/label.tsx

@@ -1,24 +0,0 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }

apps/cli/template/base/apps/web/src/components/ui/skeleton.tsx

@@ -1,15 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-primary/10", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }

apps/cli/template/base/apps/web/src/components/ui/sonner.tsx

@@ -1,29 +0,0 @@
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }

apps/cli/template/base/apps/web/src/index.css

@@ -1,119 +0,0 @@
-@import 'tailwindcss';
-
-@plugin 'tailwindcss-animate';
-
-@custom-variant dark (&:is(.dark *));
-
-@theme {
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-
-  --color-chart-1: hsl(var(--chart-1));
-  --color-chart-2: hsl(var(--chart-2));
-  --color-chart-3: hsl(var(--chart-3));
-  --color-chart-4: hsl(var(--chart-4));
-  --color-chart-5: hsl(var(--chart-5));
-}
-
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

apps/cli/template/examples/ai/apps/web-react-router/src/routes/ai.tsx

@@ -0,0 +1,64 @@
+import { useChat } from "@ai-sdk/react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Send } from "lucide-react";
+import { useRef, useEffect } from "react";
+
+export default function AI() {
+  const { messages, input, handleInputChange, handleSubmit } = useChat({
+    api: `${import.meta.env.VITE_SERVER_URL}/ai`,
+  });
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return (
+    <div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
+      <div className="overflow-y-auto space-y-4 pb-4">
+        {messages.length === 0 ? (
+          <div className="text-center text-muted-foreground mt-8">
+            Ask me anything to get started!
+          </div>
+        ) : (
+          messages.map((message) => (
+            <div
+              key={message.id}
+              className={`p-3 rounded-lg ${
+                message.role === "user"
+                  ? "bg-primary/10 ml-8"
+                  : "bg-secondary/20 mr-8"
+              }`}
+            >
+              <p className="text-sm font-semibold mb-1">
+                {message.role === "user" ? "You" : "AI Assistant"}
+              </p>
+              <div className="whitespace-pre-wrap">{message.content}</div>
+            </div>
+          ))
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <form
+        onSubmit={handleSubmit}
+        className="w-full flex items-center space-x-2 pt-2 border-t"
+      >
+        <Input
+          name="prompt"
+          value={input}
+          onChange={handleInputChange}
+          placeholder="Type your message..."
+          className="flex-1"
+          autoComplete="off"
+          autoFocus
+        />
+        <Button type="submit" size="icon">
+          <Send size={18} />
+        </Button>
+      </form>
+    </div>
+  );
+}

apps/cli/template/examples/todo/apps/web-react-router/src/routes/todos.tsx

@@ -0,0 +1,130 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { trpc } from "@/utils/trpc";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Loader2, Trash2 } from "lucide-react";
+import { useState } from "react";
+
+export default function Todos() {
+  const [newTodoText, setNewTodoText] = useState("");
+
+  const todos = useQuery(trpc.todo.getAll.queryOptions());
+  const createMutation = useMutation(
+    trpc.todo.create.mutationOptions({
+      onSuccess: () => {
+        todos.refetch();
+        setNewTodoText("");
+      },
+    })
+  );
+  const toggleMutation = useMutation(
+    trpc.todo.toggle.mutationOptions({
+      onSuccess: () => todos.refetch(),
+    })
+  );
+  const deleteMutation = useMutation(
+    trpc.todo.delete.mutationOptions({
+      onSuccess: () => todos.refetch(),
+    })
+  );
+
+  const handleAddTodo = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (newTodoText.trim()) {
+      createMutation.mutate({ text: newTodoText });
+    }
+  };
+
+  const handleToggleTodo = (id: number, completed: boolean) => {
+    toggleMutation.mutate({ id, completed: !completed });
+  };
+
+  const handleDeleteTodo = (id: number) => {
+    deleteMutation.mutate({ id });
+  };
+
+  return (
+    <div className="w-full mx-auto max-w-md py-10">
+      <Card>
+        <CardHeader>
+          <CardTitle>Todo List</CardTitle>
+          <CardDescription>Manage your tasks efficiently</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            onSubmit={handleAddTodo}
+            className="mb-6 flex items-center space-x-2"
+          >
+            <Input
+              value={newTodoText}
+              onChange={(e) => setNewTodoText(e.target.value)}
+              placeholder="Add a new task..."
+              disabled={createMutation.isPending}
+            />
+            <Button
+              type="submit"
+              disabled={createMutation.isPending || !newTodoText.trim()}
+            >
+              {createMutation.isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                "Add"
+              )}
+            </Button>
+          </form>
+
+          {todos.isLoading ? (
+            <div className="flex justify-center py-4">
+              <Loader2 className="h-6 w-6 animate-spin" />
+            </div>
+          ) : todos.data?.length === 0 ? (
+            <p className="py-4 text-center">
+              No todos yet. Add one above!
+            </p>
+          ) : (
+            <ul className="space-y-2">
+              {todos.data?.map((todo) => (
+                <li
+                  key={todo.id}
+                  className="flex items-center justify-between rounded-md border p-2"
+                >
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      checked={todo.completed}
+                      onCheckedChange={() =>
+                        handleToggleTodo(todo.id, todo.completed)
+                      }
+                      id={`todo-${todo.id}`}
+                    />
+                    <label
+                      htmlFor={`todo-${todo.id}`}
+                      className={`${todo.completed ? "line-through" : ""}`}
+                    >
+                      {todo.text}
+                    </label>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleDeleteTodo(todo.id)}
+                    aria-label="Delete todo"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/cli/template/examples/todo/apps/web-tanstack-router/src/routes/todos.tsx

@@ -28,17 +28,17 @@ function TodosRoute() {
         todos.refetch();
         setNewTodoText("");
       },
-    })
+    }),
   );
   const toggleMutation = useMutation(
     trpc.todo.toggle.mutationOptions({
       onSuccess: () => todos.refetch(),
-    })
+    }),
   );
   const deleteMutation = useMutation(
     trpc.todo.delete.mutationOptions({
       onSuccess: () => todos.refetch(),
-    })
+    }),
   );
 
   const handleAddTodo = (e: React.FormEvent) => {
@@ -57,7 +57,7 @@ function TodosRoute() {
   };
 
   return (
-    <div className="container mx-auto max-w-md py-10">
+    <div className="mx-auto w-full max-w-md py-10">
       <Card>
         <CardHeader>
           <CardTitle>Todo List</CardTitle>
@@ -91,9 +91,7 @@ function TodosRoute() {
               <Loader2 className="h-6 w-6 animate-spin" />
             </div>
           ) : todos.data?.length === 0 ? (
-            <p className="py-4 text-center text-muted-foreground">
+            <p className="py-4 text-center">No todos yet. Add one above!</p>
-              No todos yet. Add one above!
-            </p>
           ) : (
             <ul className="space-y-2">
               {todos.data?.map((todo) => (
@@ -111,7 +109,7 @@ function TodosRoute() {
                     />
                     <label
                       htmlFor={`todo-${todo.id}`}
-                      className={`${todo.completed ? "text-muted-foreground line-through" : ""}`}
+                      className={`${todo.completed ? "line-through" : ""}`}
                     >
                       {todo.text}
                     </label>

apps/cli/template/with-auth/apps/web-react-router/src/components/header.tsx

@@ -0,0 +1,34 @@
+import { NavLink } from "react-router";
+import { ModeToggle } from "./mode-toggle";
+import UserMenu from "./user-menu";
+
+export default function Header() {
+  const links = [
+    { to: "/", label: "Home" },
+    { to: "/dashboard", label: "Dashboard" },
+  ];
+
+  return (
+    <div>
+      <div className="flex flex-row items-center justify-between px-2 py-1">
+        <nav className="flex gap-4 text-lg">
+          {links.map(({ to, label }) => (
+            <NavLink
+              key={to}
+              to={to}
+              className={({ isActive }) => (isActive ? "font-bold" : "")}
+              end
+            >
+              {label}
+            </NavLink>
+          ))}
+        </nav>
+        <div className="flex items-center gap-2">
+          <ModeToggle />
+          <UserMenu />
+        </div>
+      </div>
+      <hr />
+    </div>
+  );
+}

apps/cli/template/with-auth/apps/web-react-router/src/components/sign-in-form.tsx

@@ -0,0 +1,135 @@
+import { authClient } from "@/lib/auth-client";
+import { useForm } from "@tanstack/react-form";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import { z } from "zod";
+import Loader from "./loader";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+
+export default function SignInForm({
+  onSwitchToSignUp,
+}: {
+  onSwitchToSignUp: () => void;
+}) {
+  const navigate = useNavigate();
+  const { isPending } = authClient.useSession();
+
+  const form = useForm({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+    onSubmit: async ({ value }) => {
+      await authClient.signIn.email(
+        {
+          email: value.email,
+          password: value.password,
+        },
+        {
+          onSuccess: () => {
+            navigate("/dashboard");
+            toast.success("Sign in successful");
+          },
+          onError: (error) => {
+            toast.error(error.error.message);
+          },
+        }
+      );
+    },
+    validators: {
+      onSubmit: z.object({
+        email: z.string().email("Invalid email address"),
+        password: z.string().min(6, "Password must be at least 6 characters"),
+      }),
+    },
+  });
+
+  if (isPending) {
+    return <Loader />;
+  }
+
+  return (
+    <div className="mx-auto w-full mt-10 max-w-md p-6">
+      <h1 className="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+        className="space-y-4"
+      >
+        <div>
+          <form.Field name="email">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Email</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="email"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <div>
+          <form.Field name="password">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Password</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="password"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <form.Subscribe>
+          {(state) => (
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={!state.canSubmit || state.isSubmitting}
+            >
+              {state.isSubmitting ? "Submitting..." : "Sign In"}
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+
+      <div className="mt-4 text-center">
+        <Button
+          variant="link"
+          onClick={onSwitchToSignUp}
+          className="text-indigo-600 hover:text-indigo-800"
+        >
+          Need an account? Sign Up
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/cli/template/with-auth/apps/web-react-router/src/components/sign-up-form.tsx

@@ -0,0 +1,160 @@
+import { authClient } from "@/lib/auth-client";
+import { useForm } from "@tanstack/react-form";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import { z } from "zod";
+import Loader from "./loader";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+
+export default function SignUpForm({
+  onSwitchToSignIn,
+}: {
+  onSwitchToSignIn: () => void;
+}) {
+  const navigate = useNavigate();
+  const { isPending } = authClient.useSession();
+
+  const form = useForm({
+    defaultValues: {
+      email: "",
+      password: "",
+      name: "",
+    },
+    onSubmit: async ({ value }) => {
+      await authClient.signUp.email(
+        {
+          email: value.email,
+          password: value.password,
+          name: value.name,
+        },
+        {
+          onSuccess: () => {
+            navigate("/dashboard");
+            toast.success("Sign up successful");
+          },
+          onError: (error) => {
+            toast.error(error.error.message);
+          },
+        }
+      );
+    },
+    validators: {
+      onSubmit: z.object({
+        name: z.string().min(2, "Name must be at least 2 characters"),
+        email: z.string().email("Invalid email address"),
+        password: z.string().min(6, "Password must be at least 6 characters"),
+      }),
+    },
+  });
+
+  if (isPending) {
+    return <Loader />;
+  }
+
+  return (
+    <div className="mx-auto w-full mt-10 max-w-md p-6">
+      <h1 className="mb-6 text-center text-3xl font-bold">Create Account</h1>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+        className="space-y-4"
+      >
+        <div>
+          <form.Field name="name">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Name</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <div>
+          <form.Field name="email">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Email</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="email"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <div>
+          <form.Field name="password">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Password</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="password"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <form.Subscribe>
+          {(state) => (
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={!state.canSubmit || state.isSubmitting}
+            >
+              {state.isSubmitting ? "Submitting..." : "Sign Up"}
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+
+      <div className="mt-4 text-center">
+        <Button
+          variant="link"
+          onClick={onSwitchToSignIn}
+          className="text-indigo-600 hover:text-indigo-800"
+        >
+          Already have an account? Sign In
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/cli/template/with-auth/apps/web-react-router/src/components/user-menu.tsx

@@ -0,0 +1,60 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { authClient } from "@/lib/auth-client";
+import { useNavigate } from "react-router";
+import { Button } from "./ui/button";
+import { Skeleton } from "./ui/skeleton";
+import { Link } from "react-router";
+
+export default function UserMenu() {
+  const navigate = useNavigate();
+  const { data: session, isPending } = authClient.useSession();
+
+  if (isPending) {
+    return <Skeleton className="h-9 w-24" />;
+  }
+
+  if (!session) {
+    return (
+      <Button variant="outline" asChild>
+        <Link to="/login">Sign In</Link>
+      </Button>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">{session.user.name}</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="bg-card">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Button
+            variant="destructive"
+            className="w-full"
+            onClick={() => {
+              authClient.signOut({
+                fetchOptions: {
+                  onSuccess: () => {
+                    navigate("/");
+                  },
+                },
+              });
+            }}
+          >
+            Sign Out
+          </Button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

apps/cli/template/with-auth/apps/web-react-router/src/routes/dashboard.tsx

@@ -0,0 +1,30 @@
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { useNavigate } from "react-router";
+
+export default function Dashboard() {
+  const { data: session, isPending } = authClient.useSession();
+  const navigate = useNavigate();
+
+  const privateData = useQuery(trpc.privateData.queryOptions());
+
+  useEffect(() => {
+    if (!session && !isPending) {
+      navigate("/login");
+    }
+  }, [session, isPending]);
+
+  if (isPending) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <p>Welcome {session?.user.name}</p>
+      <p>privateData: {privateData.data?.message}</p>
+    </div>
+  );
+}

apps/cli/template/with-auth/apps/web-react-router/src/routes/login.tsx

@@ -0,0 +1,13 @@
+import SignInForm from "@/components/sign-in-form";
+import SignUpForm from "@/components/sign-up-form";
+import { useState } from "react";
+
+export default function Login() {
+  const [showSignIn, setShowSignIn] = useState(false);
+
+  return showSignIn ? (
+    <SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
+  ) : (
+    <SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
+  );
+}

apps/cli/template/with-pwa/apps/web/vite.config.ts

@@ -1,35 +0,0 @@
-import tailwindcss from "@tailwindcss/vite";
-import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
-import react from "@vitejs/plugin-react";
-import path from "node:path";
-import { defineConfig } from "vite";
-import { VitePWA } from "vite-plugin-pwa";
-
-export default defineConfig({
-  plugins: [
-    tailwindcss(),
-    TanStackRouterVite({}),
-    react(),
-    VitePWA({
-      registerType: "autoUpdate",
-      manifest: {
-        name: "My App",
-        short_name: "My App ",
-        description: "My App",
-        theme_color: "#0c0c0c",
-      },
-      pwaAssets: {
-        disabled: false,
-        config: true,
-      },
-      devOptions: {
-        enabled: true,
-      },
-    }),
-  ],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-});

apps/web/src/app/(home)/_components/Navbar.tsx

@@ -66,7 +66,7 @@ const Navbar = () => {
 					</span>
 				</div>
 
-				<div className="hidden md:flex justify-center">
+				<div className="hidden md:block absolute left-1/2 transform -translate-x-1/2">
 					<div
 						className={`flex items-center backdrop-blur-sm bg-gray-100/90 dark:bg-gray-900/90 rounded-lg border border-gray-200 dark:border-gray-800 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
 							scrolled ? "w-[350px]" : "w-[240px]"

apps/web/src/app/(home)/_components/StackArchitech.tsx

@@ -39,13 +39,21 @@ const validateProjectName = (name: string): string | undefined => {
 const TECH_OPTIONS = {
 	frontend: [
 		{
-			id: "web",
+			id: "tanstack-router",
-			name: "React Web",
+			name: "TanStack Router",
-			description: "React with TanStack Router",
+			description: "Modern type-safe router for React",
 			icon: "🌐",
 			color: "from-blue-400 to-blue-600",
 			default: true,
 		},
+		{
+			id: "react-router",
+			name: "React Router",
+			description: "Declarative routing for React",
+			icon: "🧭",
+			color: "from-cyan-400 to-cyan-600",
+			default: false,
+		},
 		{
 			id: "native",
 			name: "React Native",
@@ -303,7 +311,7 @@ interface StackState {
 
 const DEFAULT_STACK: StackState = {
 	projectName: "my-better-t-app",
-	frontend: ["web"],
+	frontend: ["tanstack-router"],
 	runtime: "bun",
 	backendFramework: "hono",
 	database: "sqlite",
@@ -330,7 +338,10 @@ const StackArchitect = () => {
 	);
 
 	useEffect(() => {
-		if (!stack.frontend.includes("web") && stack.auth === "true") {
+		const hasWebFrontend =
+			stack.frontend.includes("tanstack-router") ||
+			stack.frontend.includes("react-router");
+		if (!hasWebFrontend && stack.auth === "true") {
 			setStack((prev) => ({
 				...prev,
 				auth: "false",
@@ -343,16 +354,21 @@ const StackArchitect = () => {
 		setCommand(cmd);
 
 		const notes: Record<string, string[]> = {};
+		const hasWebFrontend =
+			stack.frontend.includes("tanstack-router") ||
+			stack.frontend.includes("react-router");
 
 		notes.frontend = [];
 
 		notes.auth = [];
-		if (!stack.frontend.includes("web") && stack.auth === "true") {
+		if (!hasWebFrontend && stack.auth === "true") {
-			notes.auth.push("Authentication is only available with React Web.");
+			notes.auth.push(
+				"Authentication is only available with React Web (TanStack Router or React Router).",
+			);
 		}
 
 		notes.addons = [];
-		if (!stack.frontend.includes("web")) {
+		if (!hasWebFrontend) {
 			notes.addons.push("PWA and Tauri are only available with React Web.");
 		}
 
@@ -373,7 +389,7 @@ const StackArchitect = () => {
 		}
 
 		notes.examples = [];
-		if (!stack.frontend.includes("web")) {
+		if (!hasWebFrontend) {
 			notes.examples.push(
 				"Todo and Ai example are only available with React Web.",
 			);
@@ -398,7 +414,10 @@ const StackArchitect = () => {
 		if (stackState.frontend.length === 1 && stackState.frontend[0] === "none") {
 			flags.push("--frontend none");
 		} else if (
-			!(stackState.frontend.length === 1 && stackState.frontend[0] === "web")
+			!(
+				stackState.frontend.length === 1 &&
+				stackState.frontend[0] === "tanstack-router"
+			)
 		) {
 			flags.push(`--frontend ${stackState.frontend.join(" ")}`);
 		}
@@ -455,6 +474,7 @@ const StackArchitect = () => {
 			setStack((prev) => {
 				if (category === "frontend") {
 					const currentSelection = [...prev.frontend];
+					const webTypes = ["tanstack-router", "react-router"];
 
 					if (techId === "none") {
 						return {
@@ -470,30 +490,56 @@ const StackArchitect = () => {
 						};
 					}
 
-					if (currentSelection.includes(techId)) {
+					// Handle web router types (tanstack-router or react-router)
-						if (currentSelection.length === 1) {
+					if (webTypes.includes(techId)) {
+						// If clicking on an already selected web router, do nothing
+						if (
+							currentSelection.includes(techId) &&
+							currentSelection.length === 1
+						) {
 							return prev;
 						}
 
-						const newFrontend = currentSelection.filter((id) => id !== techId);
+						// If selecting a web router while another one is active, replace it
-
+						if (currentSelection.some((id) => webTypes.includes(id))) {
-						if (techId === "web") {
+							const nonWebSelections = currentSelection.filter(
+								(id) => !webTypes.includes(id),
+							);
 							return {
 								...prev,
-								frontend: newFrontend,
+								frontend: [...nonWebSelections, techId],
-								auth: "false",
+								auth: prev.auth, // Keep existing auth setting
-								examples: prev.examples.filter(
+							};
-									(ex) => ex !== "todo" && ex !== "ai",
+						}
-								),
+
-								addons: prev.addons.filter(
+						// If no web router was selected before
-									(addon) => addon !== "pwa" && addon !== "tauri",
+						if (currentSelection.includes("none")) {
-								),
+							return {
+								...prev,
+								frontend: [techId],
+								auth: "true",
 							};
 						}
 
 						return {
 							...prev,
-							frontend: newFrontend,
+							frontend: [
+								...currentSelection.filter((id) => id !== "none"),
+								techId,
+							],
+							auth: "true",
+						};
+					}
+
+					// Handle native selection
+					if (techId === "native") {
+						if (currentSelection.includes(techId)) {
+							if (currentSelection.length === 1) {
+								return prev; // Don't allow removing the last frontend
+							}
+							return {
+								...prev,
+								frontend: currentSelection.filter((id) => id !== techId),
 							};
 						}
 
@@ -501,19 +547,24 @@ const StackArchitect = () => {
 							return {
 								...prev,
 								frontend: [techId],
-							...(techId === "web" && { auth: "true" }),
 							};
 						}
+
 						return {
 							...prev,
 							frontend: [...currentSelection, techId],
-						...(techId === "web" && { auth: "true" }),
 						};
 					}
 
+					return prev;
+				}
+
 				if (category === "addons" || category === "examples") {
 					const currentArray = [...(prev[category] || [])];
 					const index = currentArray.indexOf(techId);
+					const hasWebFrontend =
+						prev.frontend.includes("tanstack-router") ||
+						prev.frontend.includes("react-router");
 
 					if (index >= 0) {
 						currentArray.splice(index, 1);
@@ -521,14 +572,14 @@ const StackArchitect = () => {
 						if (
 							category === "examples" &&
 							techId === "todo" &&
-							!prev.frontend.includes("web")
+							!hasWebFrontend
 						) {
 							return prev;
 						}
 						if (
 							category === "addons" &&
 							(techId === "pwa" || techId === "tauri") &&
-							!prev.frontend.includes("web")
+							!hasWebFrontend
 						) {
 							return prev;
 						}
@@ -691,18 +742,19 @@ const StackArchitect = () => {
 											stack[activeTab as keyof StackState] === tech.id;
 									}
 
+									const hasWebFrontend =
+										stack.frontend.includes("tanstack-router") ||
+										stack.frontend.includes("react-router");
 									const isDisabled =
 										(activeTab === "orm" && stack.database === "none") ||
 										(activeTab === "turso" && stack.database !== "sqlite") ||
-										(activeTab === "auth" && !stack.frontend.includes("web")) ||
+										(activeTab === "auth" && !hasWebFrontend) ||
 										(activeTab === "examples" &&
-											((tech.id === "todo" &&
+											((tech.id === "todo" && !hasWebFrontend) ||
-												!stack.frontend.includes("web")) ||
+												(tech.id === "ai" && !hasWebFrontend))) ||
-												(tech.id === "ai" &&
-													!stack.frontend.includes("web")))) ||
 										(activeTab === "addons" &&
 											(tech.id === "pwa" || tech.id === "tauri") &&
-											!stack.frontend.includes("web"));
+											!hasWebFrontend);
 
 									return (
 										<motion.div