add unistyles

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

@@ -125,7 +125,8 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 		"tanstack-router",
 		"tanstack-start",
 		"next",
-		"native",
+		"native-nativewind",
+		"native-unistyles",
 	];
 	const needsSolidQuery = frontend.includes("solid");
 	const needsReactQuery = frontend.some((f) => reactBasedFrontends.includes(f));
@@ -137,9 +138,14 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 		];
 
 		const hasReactWeb = frontend.some(
-			(f) => f !== "native" && reactBasedFrontends.includes(f),
+			(f) =>
+				f !== "native-nativewind" &&
+				f !== "native-unistyles" &&
+				reactBasedFrontends.includes(f),
 		);
-		const hasNative = frontend.includes("native");
+		const hasNative =
+			frontend.includes("native-nativewind") ||
+			frontend.includes("native-unistyles");
 
 		if (hasReactWeb && webDirExists) {
 			const webPkgJsonPath = path.join(webDir, "package.json");

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

@@ -45,7 +45,11 @@ export async function setupAuth(config: ProjectConfig): Promise<void> {
 			});
 		}
 
-		if (frontend.includes("native") && nativeDirExists) {
+		if (
+			(frontend.includes("native-nativewind") ||
+				frontend.includes("native-unistyles")) &&
+			nativeDirExists
+		) {
 			await addPackageDependency({
 				dependencies: ["better-auth", "@better-auth/expo"],
 				projectDir: nativeDir,

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

@@ -39,7 +39,9 @@ function generateReadmeContent(options: ProjectConfig): string {
 	const isConvex = backend === "convex";
 	const hasReactRouter = frontend.includes("react-router");
 	const hasTanstackRouter = frontend.includes("tanstack-router");
-	const hasNative = frontend.includes("native");
+	const hasNative =
+		frontend.includes("native-nativewind") ||
+		frontend.includes("native-unistyles");
 	const hasNext = frontend.includes("next");
 	const hasTanstackStart = frontend.includes("tanstack-start");
 	const hasSvelte = frontend.includes("svelte");
@@ -78,7 +80,16 @@ This project was created with [Better-T-Stack](https://github.com/AmanVarshney01
 
 ## Features
 
-${generateFeaturesList(database, auth, addons, orm, runtime, frontend, backend, api)}
+${generateFeaturesList(
+	database,
+	auth,
+	addons,
+	orm,
+	runtime,
+	frontend,
+	backend,
+	api,
+)}
 
 ## Getting Started
 
@@ -207,7 +218,9 @@ function generateFeaturesList(
 	const isConvex = backend === "convex";
 	const hasTanstackRouter = frontend.includes("tanstack-router");
 	const hasReactRouter = frontend.includes("react-router");
-	const hasNative = frontend.includes("native");
+	const hasNative =
+		frontend.includes("native-nativewind") ||
+		frontend.includes("native-unistyles");
 	const hasNext = frontend.includes("next");
 	const hasTanstackStart = frontend.includes("tanstack-start");
 	const hasSvelte = frontend.includes("svelte");

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

@@ -118,7 +118,10 @@ export async function setupEnvironmentVariables(
 		}
 	}
 
-	if (frontend.includes("native")) {
+	if (
+		frontend.includes("native-nativewind") ||
+		frontend.includes("native-unistyles")
+	) {
 		const nativeDir = path.join(projectDir, "apps/native");
 		if (await fs.pathExists(nativeDir)) {
 			let envVarName = "EXPO_PUBLIC_SERVER_URL";

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

@@ -1,11 +1,6 @@
 import { consola } from "consola";
 import pc from "picocolors";
-import type {
-	ProjectBackend,
-	ProjectDatabase,
-	ProjectOrm,
-	ProjectRuntime,
-} from "../types";
+import type { ProjectDatabase, ProjectOrm, ProjectRuntime } from "../types";
 import { getPackageExecutionCommand } from "../utils/get-package-execution-command";
 
 import type { ProjectConfig } from "../types";
@@ -43,9 +38,11 @@ export function displayPostInstallInstructions(
 	const lintingInstructions = hasHuskyOrBiome
 		? getLintingInstructions(runCmd)
 		: "";
-	const nativeInstructions = frontend?.includes("native")
-		? getNativeInstructions(isConvex)
-		: "";
+	const nativeInstructions =
+		frontend?.includes("native-nativewind") ||
+		frontend?.includes("native-unistyles")
+			? getNativeInstructions(isConvex)
+			: "";
 	const pwaInstructions =
 		addons?.includes("pwa") &&
 		(frontend?.includes("react-router") ||
@@ -67,7 +64,9 @@ export function displayPostInstallInstructions(
 			"solid",
 		].includes(f),
 	);
-	const hasNative = frontend?.includes("native");
+	const hasNative =
+		frontend?.includes("native-nativewind") ||
+		frontend?.includes("native-unistyles");
 
 	const bunWebNativeWarning =
 		packageManager === "bun" && hasNative && hasWeb
@@ -90,7 +89,9 @@ export function displayPostInstallInstructions(
 	}
 
 	if (isConvex) {
-		output += `${pc.cyan(`${stepCounter++}.`)} ${runCmd} dev:setup ${pc.dim("(this will guide you through Convex project setup)")}\n`;
+		output += `${pc.cyan(`${stepCounter++}.`)} ${runCmd} dev:setup ${pc.dim(
+			"(this will guide you through Convex project setup)",
+		)}\n`;
 		output += `${pc.cyan(`${stepCounter++}.`)} ${runCmd} dev\n\n`;
 	} else {
 		output += `${pc.cyan(`${stepCounter++}.`)} ${runCmd} dev\n\n`;
@@ -101,7 +102,9 @@ export function displayPostInstallInstructions(
 	if (hasWeb) {
 		output += `${pc.cyan("•")} Frontend: http://localhost:${webPort}\n`;
 	} else if (!hasNative && !addons?.includes("starlight")) {
-		output += `${pc.yellow("NOTE:")} You are creating a backend-only app (no frontend selected)\n`;
+		output += `${pc.yellow(
+			"NOTE:",
+		)} You are creating a backend-only app (no frontend selected)\n`;
 	}
 
 	if (!isConvex) {
@@ -122,8 +125,12 @@ export function displayPostInstallInstructions(
 	if (noOrmWarning) output += `\n${noOrmWarning.trim()}\n`;
 	if (bunWebNativeWarning) output += `\n${bunWebNativeWarning.trim()}\n`;
 
-	output += `\n${pc.bold("Update all dependencies:\n")}${pc.cyan(tazeCommand)}\n\n`;
-	output += `${pc.bold("Like Better-T Stack?")} Please consider giving us a star on GitHub:\n`;
+	output += `\n${pc.bold("Update all dependencies:\n")}${pc.cyan(
+		tazeCommand,
+	)}\n\n`;
+	output += `${pc.bold(
+		"Like Better-T Stack?",
+	)} Please consider giving us a star on GitHub:\n`;
 	output += pc.cyan("https://github.com/AmanVarshney01/create-better-t-stack");
 
 	consola.box(output);
@@ -183,7 +190,9 @@ function getDatabaseInstructions(
 		instructions.push(`${pc.cyan("•")} Database UI: ${`${runCmd} db:studio`}`);
 		if (database === "sqlite") {
 			instructions.push(
-				`${pc.cyan("•")} Start local DB (if needed): ${`cd apps/server && ${runCmd} db:local`}`,
+				`${pc.cyan(
+					"•",
+				)} Start local DB (if needed): ${`cd apps/server && ${runCmd} db:local`}`,
 			);
 		}
 	} else if (orm === "none") {

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

@@ -70,7 +70,9 @@ export async function setupFrontendTemplates(
 	const hasNuxtWeb = context.frontend.includes("nuxt");
 	const hasSvelteWeb = context.frontend.includes("svelte");
 	const hasSolidWeb = context.frontend.includes("solid");
-	const hasNative = context.frontend.includes("native");
+	const hasNativeWind = context.frontend.includes("native-nativewind");
+	const hasUnistyles = context.frontend.includes("native-unistyles");
+	const hasNative = hasNativeWind || hasUnistyles;
 	const isConvex = context.backend === "convex";
 
 	if (hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb) {
@@ -181,16 +183,45 @@ export async function setupFrontendTemplates(
 		}
 	}
 
-	if (hasNative) {
+	if (hasNativeWind || hasUnistyles) {
 		const nativeAppDir = path.join(projectDir, "apps/native");
 		await fs.ensureDir(nativeAppDir);
 
-		const nativeBaseDir = path.join(PKG_ROOT, "templates/frontend/native");
-		if (await fs.pathExists(nativeBaseDir)) {
-			await processAndCopyFiles("**/*", nativeBaseDir, nativeAppDir, context);
+		const nativeBaseCommonDir = path.join(
+			PKG_ROOT,
+			"templates/frontend/native/native-base",
+		);
+		if (await fs.pathExists(nativeBaseCommonDir)) {
+			await processAndCopyFiles(
+				"**/*",
+				nativeBaseCommonDir,
+				nativeAppDir,
+				context,
+			);
 		} else {
 		}
 
+		let nativeFrameworkPath = "";
+		if (hasNativeWind) {
+			nativeFrameworkPath = "nativewind";
+		} else if (hasUnistyles) {
+			nativeFrameworkPath = "unistyles";
+		}
+
+		const nativeSpecificDir = path.join(
+			PKG_ROOT,
+			`templates/frontend/native/${nativeFrameworkPath}`,
+		);
+		if (await fs.pathExists(nativeSpecificDir)) {
+			await processAndCopyFiles(
+				"**/*",
+				nativeSpecificDir,
+				nativeAppDir,
+				context,
+				true,
+			);
+		}
+
 		if (!isConvex && (context.api === "trpc" || context.api === "orpc")) {
 			const apiNativeSrcDir = path.join(
 				PKG_ROOT,
@@ -203,7 +234,6 @@ export async function setupFrontendTemplates(
 					nativeAppDir,
 					context,
 				);
-			} else {
 			}
 		}
 	}
@@ -345,7 +375,9 @@ export async function setupAuthTemplate(
 	const hasNuxtWeb = context.frontend.includes("nuxt");
 	const hasSvelteWeb = context.frontend.includes("svelte");
 	const hasSolidWeb = context.frontend.includes("solid");
-	const hasNative = context.frontend.includes("native");
+	const hasNativeWind = context.frontend.includes("native-nativewind");
+	const hasUnistyles = context.frontend.includes("native-unistyles");
+	const hasNative = hasNativeWind || hasUnistyles;
 
 	if (serverAppDirExists) {
 		const authServerBaseSrc = path.join(PKG_ROOT, "templates/auth/server/base");
@@ -475,10 +507,39 @@ export async function setupAuthTemplate(
 	}
 
 	if (hasNative && nativeAppDirExists) {
-		const authNativeSrc = path.join(PKG_ROOT, "templates/auth/native");
-		if (await fs.pathExists(authNativeSrc)) {
-			await processAndCopyFiles("**/*", authNativeSrc, nativeAppDir, context);
-		} else {
+		const authNativeBaseSrc = path.join(
+			PKG_ROOT,
+			"templates/auth/native/native-base",
+		);
+		if (await fs.pathExists(authNativeBaseSrc)) {
+			await processAndCopyFiles(
+				"**/*",
+				authNativeBaseSrc,
+				nativeAppDir,
+				context,
+			);
+		}
+
+		let nativeFrameworkAuthPath = "";
+		if (hasNativeWind) {
+			nativeFrameworkAuthPath = "nativewind";
+		} else if (hasUnistyles) {
+			nativeFrameworkAuthPath = "unistyles";
+		}
+
+		if (nativeFrameworkAuthPath) {
+			const authNativeFrameworkSrc = path.join(
+				PKG_ROOT,
+				`templates/auth/native/${nativeFrameworkAuthPath}`,
+			);
+			if (await fs.pathExists(authNativeFrameworkSrc)) {
+				await processAndCopyFiles(
+					"**/*",
+					authNativeFrameworkSrc,
+					nativeAppDir,
+					context,
+				);
+			}
 		}
 	}
 }
@@ -695,6 +756,9 @@ export async function handleExtras(
 	context: ProjectConfig,
 ): Promise<void> {
 	const extrasDir = path.join(PKG_ROOT, "templates/extras");
+	const hasNativeWind = context.frontend.includes("native-nativewind");
+	const hasUnistyles = context.frontend.includes("native-unistyles");
+	const hasNative = hasNativeWind || hasUnistyles;
 
 	if (context.packageManager === "pnpm") {
 		const pnpmWorkspaceSrc = path.join(extrasDir, "pnpm-workspace.yaml");
@@ -706,7 +770,7 @@ export async function handleExtras(
 
 	if (
 		context.packageManager === "pnpm" &&
-		(context.frontend.includes("native") || context.frontend.includes("nuxt"))
+		(hasNative || context.frontend.includes("nuxt"))
 	) {
 		const npmrcTemplateSrc = path.join(extrasDir, "_npmrc.hbs");
 		const npmrcDest = path.join(projectDir, ".npmrc");