add react router

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>({
-		message: "Choose frontends",
+	const frontendTypes = await multiselect({
+		message: "Select platforms to develop for",
 		options: [
 			{
 				value: "web",
-				label: "Web App",
-				hint: "React + TanStack Router web application",
+				label: "Web",
+				hint: "React Web Application",
 			},
 			{
 				value: "native",
-				label: "Native App",
-				hint: "React Native + Expo application",
+				label: "Native",
+				hint: "Create a React Native/Expo app",
 			},
 		],
-		initialValues: DEFAULT_CONFIG.frontend,
-		required: false,
+		initialValues: DEFAULT_CONFIG.frontend.some(
+			(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;
 }