feat(cli): add uniwind with heroui-native (#686)

Author: AmanVarshney01

.cursor/rules/better-t-stack-repo.mdc

@@ -1,10 +1,10 @@
 ---
 alwaysApply: true
 ---
-
 - Always use functional programming; avoid object-oriented programming.
 - Define functions using the standard function declaration syntax, not arrow functions.
 - Do not include emojis.
 - Use TypeScript type aliases instead of interface declarations.
 - In Handlebars templates, avoid generic if/else blocks. Write explicit conditions, such as: use if (eq orm "prisma") for Prisma, and else if (eq orm "drizzle") for Drizzle.
-- Do not use explicit return types
+- Do not use explicit return types
+- escape the '{{' in hbs templates like '\{{'

apps/cli/README.md

@@ -57,7 +57,7 @@ Options:
   --orm <type>                    ORM type (none, drizzle, prisma, mongoose)
   --auth                          Include authentication
   --no-auth                       Exclude authentication
-  --frontend <types...>           Frontend types (tanstack-router, react-router, tanstack-start, next, nuxt, svelte, solid, native-nativewind, native-unistyles, none)
+  --frontend <types...>           Frontend types (tanstack-router, react-router, tanstack-start, next, nuxt, svelte, solid, native-bare, native-uniwind, native-unistyles, none)
   --addons <types...>             Additional addons (pwa, tauri, starlight, biome, husky, turborepo, fumadocs, ultracite, oxlint, none)
   --examples <types...>           Examples to include (todo, ai, none)
   --git                           Initialize git repository
@@ -119,7 +119,7 @@ npx create-better-t-stack my-app --backend elysia --runtime node
 Create a project with multiple frontend options (one web + one native):
 
 ```bash
-npx create-better-t-stack my-app --frontend tanstack-router native-nativewind
+npx create-better-t-stack my-app --frontend tanstack-router native-bare
 ```
 
 Create a project with examples:

apps/cli/src/constants.ts

@@ -155,7 +155,7 @@ export const dependencyVersionMap = {
 	"@sveltejs/adapter-cloudflare": "^7.2.1",
 	"@cloudflare/workers-types": "^4.20250822.0",
 
-	alchemy: "^0.75.1",
+	alchemy: "^0.77.0",
 
 	dotenv: "^17.2.2",
 	tsdown: "^0.15.5",

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

@@ -56,7 +56,8 @@ export async function setupExamples(config: ProjectConfig) {
 			frontend.includes("tanstack-start");
 		const hasNext = frontend.includes("next");
 		const hasReactNative =
-			frontend.includes("native-nativewind") ||
+			frontend.includes("native-bare") ||
+			frontend.includes("native-uniwind") ||
 			frontend.includes("native-unistyles");
 
 		if (webClientDirExists) {

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

@@ -118,7 +118,8 @@ function getFrameworksFromFrontend(frontend: string[]): string[] {
 		"tanstack-start": "react",
 		next: "next",
 		nuxt: "vue",
-		"native-nativewind": "react",
+		"native-bare": "react",
+		"native-uniwind": "react",
 		"native-unistyles": "react",
 		svelte: "svelte",
 		solid: "solid",

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

@@ -33,7 +33,7 @@ function getFrontendType(frontend: Frontend[]): {
 		"tanstack-start",
 		"next",
 	];
-	const nativeFrontends = ["native-nativewind", "native-unistyles"];
+	const nativeFrontends = ["native-bare", "native-uniwind", "native-unistyles"];
 
 	return {
 		hasReactWeb: frontend.some((f) => reactBasedFrontends.includes(f)),
@@ -149,7 +149,8 @@ function getQueryDependencies(frontend: Frontend[]) {
 		"tanstack-router",
 		"tanstack-start",
 		"next",
-		"native-nativewind",
+		"native-bare",
+		"native-uniwind",
 		"native-unistyles",
 	];
 
@@ -162,12 +163,14 @@ function getQueryDependencies(frontend: Frontend[]) {
 	if (needsReactQuery) {
 		const hasReactWeb = frontend.some(
 			(f) =>
-				f !== "native-nativewind" &&
+				f !== "native-bare" &&
+				f !== "native-uniwind" &&
 				f !== "native-unistyles" &&
 				reactBasedFrontends.includes(f),
 		);
 		const hasNative =
-			frontend.includes("native-nativewind") ||
+			frontend.includes("native-bare") ||
+			frontend.includes("native-uniwind") ||
 			frontend.includes("native-unistyles");
 
 		if (hasReactWeb) {

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

@@ -52,7 +52,8 @@ export async function setupAuth(config: ProjectConfig) {
 				const convexBackendDirExists = await fs.pathExists(convexBackendDir);
 
 				const hasNativeForBA =
-					frontend.includes("native-nativewind") ||
+					frontend.includes("native-bare") ||
+					frontend.includes("native-uniwind") ||
 					frontend.includes("native-unistyles");
 
 				if (convexBackendDirExists) {
@@ -98,9 +99,13 @@ export async function setupAuth(config: ProjectConfig) {
 					}
 				}
 
-				const hasNativeWind = frontend.includes("native-nativewind");
+				const hasNativeBare = frontend.includes("native-bare");
+				const hasNativeUniwind = frontend.includes("native-uniwind");
 				const hasUnistyles = frontend.includes("native-unistyles");
-				if (nativeDirExists && (hasNativeWind || hasUnistyles)) {
+				if (
+					nativeDirExists &&
+					(hasNativeBare || hasNativeUniwind || hasUnistyles)
+				) {
 					await addPackageDependency({
 						dependencies: [
 							"better-auth",
@@ -116,12 +121,13 @@ export async function setupAuth(config: ProjectConfig) {
 				}
 			}
 
-			const hasNativeWind = frontend.includes("native-nativewind");
+			const hasNativeBare = frontend.includes("native-bare");
+			const hasNativeUniwind = frontend.includes("native-uniwind");
 			const hasUnistyles = frontend.includes("native-unistyles");
 			if (
 				auth === "clerk" &&
 				nativeDirExists &&
-				(hasNativeWind || hasUnistyles)
+				(hasNativeBare || hasNativeUniwind || hasUnistyles)
 			) {
 				await addPackageDependency({
 					dependencies: ["@clerk/clerk-expo"],
@@ -163,7 +169,8 @@ export async function setupAuth(config: ProjectConfig) {
 		}
 
 		if (
-			(frontend.includes("native-nativewind") ||
+			(frontend.includes("native-bare") ||
+				frontend.includes("native-uniwind") ||
 				frontend.includes("native-unistyles")) &&
 			nativeDirExists
 		) {

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

@@ -43,7 +43,8 @@ function generateReadmeContent(options: ProjectConfig) {
 	const isConvex = backend === "convex";
 	const hasReactRouter = frontend.includes("react-router");
 	const hasNative =
-		frontend.includes("native-nativewind") ||
+		frontend.includes("native-bare") ||
+		frontend.includes("native-uniwind") ||
 		frontend.includes("native-unistyles");
 	const hasSvelte = frontend.includes("svelte");
 
@@ -321,7 +322,8 @@ function generateProjectStructure(
 	}
 
 	const hasNative =
-		frontend.includes("native-nativewind") ||
+		frontend.includes("native-bare") ||
+		frontend.includes("native-uniwind") ||
 		frontend.includes("native-unistyles");
 	if (hasNative) {
 		if (isBackendSelf) {
@@ -402,7 +404,8 @@ function generateFeaturesList(
 	const hasTanstackRouter = frontend.includes("tanstack-router");
 	const hasReactRouter = frontend.includes("react-router");
 	const hasNative =
-		frontend.includes("native-nativewind") ||
+		frontend.includes("native-bare") ||
+		frontend.includes("native-uniwind") ||
 		frontend.includes("native-unistyles");
 	const hasNext = frontend.includes("next");
 	const hasTanstackStart = frontend.includes("tanstack-start");

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

@@ -225,7 +225,8 @@ export async function setupEnvironmentVariables(config: ProjectConfig) {
 	}
 
 	if (
-		frontend.includes("native-nativewind") ||
+		frontend.includes("native-bare") ||
+		frontend.includes("native-uniwind") ||
 		frontend.includes("native-unistyles")
 	) {
 		const nativeDir = path.join(projectDir, "apps/native");
@@ -277,7 +278,8 @@ export async function setupEnvironmentVariables(config: ProjectConfig) {
 				const envLocalPath = path.join(convexBackendDir, ".env.local");
 
 				const hasNative =
-					frontend.includes("native-nativewind") ||
+					frontend.includes("native-bare") ||
+					frontend.includes("native-uniwind") ||
 					frontend.includes("native-unistyles");
 				const hasWeb = hasWebFrontend;
 

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

@@ -61,7 +61,8 @@ export async function displayPostInstallInstructions(
 		? getLintingInstructions(runCmd)
 		: "";
 	const nativeInstructions =
-		frontend?.includes("native-nativewind") ||
+		frontend?.includes("native-bare") ||
+		frontend?.includes("native-uniwind") ||
 		frontend?.includes("native-unistyles")
 			? getNativeInstructions(isConvex, isBackendSelf, frontend || [])
 			: "";
@@ -103,7 +104,8 @@ export async function displayPostInstallInstructions(
 		].includes(f),
 	);
 	const hasNative =
-		frontend?.includes("native-nativewind") ||
+		frontend?.includes("native-bare") ||
+		frontend?.includes("native-uniwind") ||
 		frontend?.includes("native-unistyles");
 
 	const bunWebNativeWarning =