create-better-t-stack 3.12.5 → 3.12.7

package/templates/frontend/native/uniwind/app/(drawer)/index.tsx.hbs

@@ -1,4 +1,4 @@
-import { Text, View, TouchableOpacity } from "react-native";
+import { Text, View } from "react-native";
 import { Container } from "@/components/container";
 {{#if (eq api "orpc")}}
 import { useQuery } from "@tanstack/react-query";
@@ -27,7 +27,7 @@ import { api } from "@{{projectName}}/backend/convex/_generated/api";
 {{#unless (or (eq backend "none") (and (eq backend "convex") (eq auth "better-auth")))}}
 import { Ionicons } from "@expo/vector-icons";
 {{/unless}}
-import { Card, Chip, useThemeColor } from "heroui-native";
+import { Button, Chip, Divider, Spinner, Surface, useThemeColor } from "heroui-native";
 
 export default function Home() {
 {{#if (eq api "orpc")}}
@@ -48,7 +48,6 @@ const user = useQuery(api.auth.getCurrentUser, isAuthenticated ? {} : "skip");
 const healthCheck = useQuery(api.healthCheck.get);
 {{/if}}
 {{#unless (eq backend "none")}}
-const mutedColor = useThemeColor("muted");
 const successColor = useThemeColor("success");
 const dangerColor = useThemeColor("danger");
 
@@ -64,28 +63,32 @@ const isLoading = healthCheck?.isLoading;
 {{/unless}}
 
 return (
-<Container className="p-6">
-  <View className="py-4 mb-6">
-    <Text className="text-4xl font-bold text-foreground mb-2">
-      BETTER T STACK
+<Container className="p-4">
+  <View className="py-6 mb-4">
+    <Text className="text-3xl font-semibold text-foreground tracking-tight">
+      Better T Stack
     </Text>
+    <Text className="text-muted text-sm mt-1">Full-stack TypeScript starter</Text>
   </View>
 
   {{#unless (or (eq backend "none") (and (eq backend "convex") (eq auth "better-auth")))}}
-  <Card variant="secondary" className="p-6">
-    <View className="flex-row items-center justify-between mb-4">
-      <Card.Title>System Status</Card.Title>
+  <Surface variant="secondary" className="p-4 rounded-lg">
+    <View className="flex-row items-center justify-between mb-3">
+      <Text className="text-foreground font-medium">System Status</Text>
       <Chip variant="secondary" color={isConnected ? "success" : "danger" } size="sm">
         <Chip.Label>
           {isConnected ? "LIVE" : "OFFLINE"}
         </Chip.Label>
       </Chip>
     </View>
-    <Card className="p-4">
+
+    <Divider className="mb-3" />
+
+    <Surface variant="tertiary" className="p-3 rounded-md">
       <View className="flex-row items-center">
-        <View className={`w-3 h-3 rounded-full mr-3 ${ isConnected ? "bg-success" : "bg-muted" }`} />
+        <View className={`w-2 h-2 rounded-full mr-3 ${ isConnected ? "bg-success" : "bg-muted" }`} />
         <View className="flex-1">
-          <Text className="text-foreground font-medium mb-1">
+          <Text className="text-foreground text-sm font-medium">
             {{#if (eq backend "convex")}}
             Convex Backend
             {{else}}
@@ -94,77 +97,80 @@ return (
             {{/unless}}
             {{/if}}
           </Text>
-          <Card.Description>
+          <Text className="text-muted text-xs mt-0.5">
             {isLoading
             ? "Checking connection..."
             : isConnected
             ? "Connected to API"
             : "API Disconnected"}
-          </Card.Description>
+          </Text>
         </View>
-        {isLoading && (
-        <Ionicons name="hourglass-outline" size={20} color={mutedColor} />
-        )}
+        {isLoading && <Spinner size="sm" />}
         {!isLoading && isConnected && (
-        <Ionicons name="checkmark-circle" size={20} color={successColor} />
+        <Ionicons name="checkmark-circle" size={18} color={successColor} />
         )}
         {!isLoading && !isConnected && (
-        <Ionicons name="close-circle" size={20} color={dangerColor} />
+        <Ionicons name="close-circle" size={18} color={dangerColor} />
         )}
       </View>
-    </Card>
-  </Card>
+    </Surface>
+  </Surface>
   {{/unless}}
 
   {{#if (and (eq backend "convex") (eq auth "clerk"))}}
   <Authenticated>
-    <Card variant="secondary" className="mt-6 p-4">
-      <Text className="text-foreground text-base mb-2">
-        Hello {user?.emailAddresses[0].emailAddress}
-      </Text>
-      <Text className="text-muted text-sm mb-4">
-        Private Data: {privateData?.message}
-      </Text>
-      <SignOutButton />
-    </Card>
+    <Surface variant="secondary" className="mt-4 p-4 rounded-lg">
+      <View className="flex-row items-center justify-between">
+        <View className="flex-1">
+          <Text className="text-foreground font-medium">{user?.emailAddresses[0].emailAddress}</Text>
+          <Text className="text-muted text-xs mt-0.5">Private: {privateData?.message}</Text>
+        </View>
+        <SignOutButton />
+      </View>
+    </Surface>
   </Authenticated>
   <Unauthenticated>
-    <View className="mt-6 gap-4">
+    <View className="mt-4 gap-3">
       <Link href="/(auth)/sign-in" asChild>
-      <Text className="text-primary font-semibold">Sign in</Text>
+        <Button variant="secondary"><Button.Label>Sign In</Button.Label></Button>
       </Link>
       <Link href="/(auth)/sign-up" asChild>
-      <Text className="text-primary font-semibold">Sign up</Text>
+        <Button variant="ghost"><Button.Label>Sign Up</Button.Label></Button>
       </Link>
     </View>
   </Unauthenticated>
   <AuthLoading>
-    <Text className="text-muted">Loading...</Text>
+    <View className="mt-4 items-center">
+      <Spinner size="sm" />
+    </View>
   </AuthLoading>
   {{/if}}
 
   {{#if (and (eq backend "convex") (eq auth "better-auth"))}}
   {user ? (
-  <Card variant="secondary" className="p-4 mb-4">
-    <View className="mb-2">
-      <Text className="text-foreground text-base">
-        Welcome, <Text className="font-semibold">{user.name}</Text>
-      </Text>
-    </View>
-    <Text className="text-muted text-sm mb-4">{user.email}</Text>
-    <TouchableOpacity className="bg-danger px-4 py-2 rounded-md self-start" onPress={()=> {
-      authClient.signOut();
-      }}
+  <Surface variant="secondary" className="mb-4 p-4 rounded-lg">
+    <View className="flex-row items-center justify-between">
+      <View className="flex-1">
+        <Text className="text-foreground font-medium">{user.name}</Text>
+        <Text className="text-muted text-xs mt-0.5">{user.email}</Text>
+      </View>
+      <Button
+        variant="destructive"
+        size="sm"
+        onPress={() => {
+          authClient.signOut();
+        }}
       >
-      <Text className="text-danger-foreground font-medium">Sign Out</Text>
-    </TouchableOpacity>
-  </Card>
+        Sign Out
+      </Button>
+    </View>
+  </Surface>
   ) : null}
-  <Card variant="secondary" className="p-4 mb-4">
+  <Surface variant="secondary" className="p-4 rounded-lg">
     <Text className="text-foreground font-medium mb-2">API Status</Text>
     <View className="flex-row items-center gap-2">
-      <View className={`w-3 h-3 rounded-full ${healthCheck==="OK" ? "bg-success" : "bg-danger" }`} />
-      <Text className="text-muted">
+      <View className={`w-2 h-2 rounded-full ${healthCheck==="OK" ? "bg-success" : "bg-danger" }`} />
+      <Text className="text-muted text-xs">
         {healthCheck === undefined
         ? "Checking..."
         : healthCheck === "OK"
@@ -172,12 +178,12 @@ return (
         : "API Disconnected"}
       </Text>
     </View>
-  </Card>
+  </Surface>
   {!user && (
-  <>
+  <View className="mt-4 gap-4">
     <SignIn />
     <SignUp />
-  </>
+  </View>
   )}
   {{/if}}
 </Container>

package/templates/frontend/native/uniwind/app/+not-found.tsx.hbs

@@ -1,30 +1,25 @@
-import { Container } from "@/components/container";
 import { Link, Stack } from "expo-router";
-import { Text, View, Pressable } from "react-native";
-import { Card } from "heroui-native";
+import { Button, Surface } from "heroui-native";
+import { Text, View } from "react-native";
+
+import { Container } from "@/components/container";
 
 export default function NotFoundScreen() {
 	return (
 		<>
-			<Stack.Screen options=\{{ title: "Oops!" }} />
+			<Stack.Screen options=\{{ title: "Not Found" }} />
 			<Container>
-				<View className="flex-1 justify-center items-center p-6">
-					<Card variant="secondary" className="items-center p-8 max-w-md">
-						<Text className="text-6xl mb-4">🤔</Text>
-						<Card.Title className="text-2xl text-center mb-2">
-							Page Not Found
-						</Card.Title>
-						<Card.Description className="text-center mb-6">
-							Sorry, the page you're looking for doesn't exist.
-						</Card.Description>
-					<Link href="/" asChild>
-						<Pressable className="bg-accent px-6 py-3 rounded-lg active:opacity-70">
-							<Text className="text-accent-foreground font-medium text-base">
-								Go to Home
-							</Text>
-						</Pressable>
-					</Link>
-					</Card>
+				<View className="flex-1 justify-center items-center p-4">
+					<Surface variant="secondary" className="items-center p-6 max-w-sm rounded-lg">
+						<Text className="text-4xl mb-3">🤔</Text>
+						<Text className="text-foreground font-medium text-lg mb-1">Page Not Found</Text>
+						<Text className="text-muted text-sm text-center mb-4">
+							The page you're looking for doesn't exist.
+						</Text>
+						<Link href="/" asChild>
+							<Button size="sm">Go Home</Button>
+						</Link>
+					</Surface>
 				</View>
 			</Container>
 		</>

package/templates/frontend/native/uniwind/app/modal.tsx.hbs

@@ -1,8 +1,9 @@
-import { Container } from "@/components/container";
-import { Text, View, Pressable } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
-import { Card, useThemeColor } from "heroui-native";
+import { Button, Surface, useThemeColor } from "heroui-native";
+import { Text, View } from "react-native";
+
+import { Container } from "@/components/container";
 
 function Modal() {
 	const accentForegroundColor = useThemeColor("accent-foreground");
@@ -13,38 +14,21 @@ function Modal() {
 
 	return (
 		<Container>
-			<View className="flex-1 justify-center items-center p-6">
-				<Card variant="secondary" className="p-6 w-full max-w-sm">
-					<Card.Body className="gap-4 items-center">
-						<View className="w-16 h-16 bg-accent rounded-full items-center justify-center mb-2">
-							<Ionicons name="checkmark" size={32} color={accentForegroundColor} />
+			<View className="flex-1 justify-center items-center p-4">
+				<Surface variant="secondary" className="p-5 w-full max-w-sm rounded-lg">
+					<View className="items-center">
+						<View className="w-12 h-12 bg-accent rounded-lg items-center justify-center mb-3">
+							<Ionicons name="checkmark" size={24} color={accentForegroundColor} />
 						</View>
-						<Card.Title className="text-center text-xl">
-							Modal Screen
-						</Card.Title>
-						<Card.Description className="text-center">
-							This is an example modal screen. You can use this pattern for
-							dialogs, confirmations, or any overlay content.
-						</Card.Description>
-					</Card.Body>
-					<Card.Footer className="mt-4">
-						<Pressable
-							onPress={handleClose}
-							className="bg-accent p-4 rounded-lg w-full active:opacity-70"
-						>
-							<View className="flex-row items-center justify-center">
-								<Text className="text-accent-foreground font-semibold text-base mr-2">
-									Close Modal
-								</Text>
-								<Ionicons
-									name="close-circle"
-									size={20}
-									color={accentForegroundColor}
-								/>
-							</View>
-						</Pressable>
-					</Card.Footer>
-				</Card>
+						<Text className="text-foreground font-medium text-lg mb-1">Modal Screen</Text>
+						<Text className="text-muted text-sm text-center mb-4">
+							This is an example modal screen for dialogs and confirmations.
+						</Text>
+					</View>
+					<Button onPress={handleClose} className="w-full" size="sm">
+						<Button.Label>Close</Button.Label>
+					</Button>
+				</Surface>
 			</View>
 		</Container>
 	);

package/templates/frontend/native/uniwind/package.json.hbs

@@ -1,6 +1,7 @@
 {
   "name": "native",
   "version": "1.0.0",
+  "private": true,
   "main": "expo-router/entry",
   "scripts": {
     "start": "expo start",
@@ -13,7 +14,7 @@
   "dependencies": {
     "@expo/metro-runtime": "~6.1.2",
     "@expo/vector-icons": "^15.0.3",
-    "@gorhom/bottom-sheet": "^5.2.6",
+    "@gorhom/bottom-sheet": "^5",
     "@react-navigation/drawer": "^7.3.9",
     "@react-navigation/elements": "^2.8.1",
     {{#if (includes examples "ai")}}
@@ -29,26 +30,25 @@
     "expo-router": "~6.0.14",
     "expo-secure-store": "~15.0.7",
     "expo-status-bar": "~3.0.8",
-    "heroui-native": "1.0.0-beta.3",
+    "heroui-native": "^1.0.0-beta.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
-    "react-native-gesture-handler": "~2.28.0",
+    "react-native-gesture-handler": "^2.28.0",
     "react-native-keyboard-controller": "1.18.5",
-    "react-native-reanimated": "~4.1.5",
-    "react-native-safe-area-context": "5.6.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
     "react-native-svg": "15.12.1",
     "react-native-web": "^0.21.0",
     "react-native-worklets": "0.5.1",
     "tailwind-merge": "^3.4.0",
-    "tailwind-variants": "3.1.1",
-    "tailwindcss": "~4.1.17",
-    "uniwind": "^1.0.4"
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.1.18",
+    "uniwind": "^1.2.2"
   },
   "devDependencies": {
     "@types/node": "^24.10.0",
     "@types/react": "~19.1.0"
-  },
-  "private": true
+  }
 }

package/templates/frontend/nuxt/app/components/Header.vue.hbs

@@ -1,44 +1,40 @@
 <script setup lang="ts">
-import ModeToggle from './ModeToggle.vue'
+import type { NavigationMenuItem } from '@nuxt/ui'
 {{#if (eq auth "better-auth")}}
 import UserMenu from './UserMenu.vue'
 {{/if}}
 
-const links = [
-    { to: "/", label: "Home" },
+const route = useRoute()
+
+const items = computed<NavigationMenuItem[]>(() => [
+    { label: "Home", to: "/", active: route.path === "/" },
     {{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
-    { to: "/dashboard", label: "Dashboard" },
+    { label: "Dashboard", to: "/dashboard", active: route.path.startsWith("/dashboard") },
     {{/if}}
     {{#if (includes examples "todo")}}
-    { to: "/todos", label: "Todos" },
+    { label: "Todos", to: "/todos", active: route.path.startsWith("/todos") },
     {{/if}}
     {{#if (includes examples "ai")}}
-    { to: "/ai", label: "AI Chat" },
+    { label: "AI Chat", to: "/ai", active: route.path.startsWith("/ai") },
     {{/if}}
-];
+])
 </script>
 
 <template>
-  <div>
-    <div class="flex flex-row items-center justify-between px-2 py-1">
-      <nav class="flex gap-4 text-lg">
-        <NuxtLink
-          v-for="link in links"
-          :key="link.to"
-          :to="link.to"
-          class="text-foreground hover:text-primary"
-          active-class="text-primary font-semibold"
-        >
-          \{{ link.label }}
-        </NuxtLink>
-      </nav>
-      <div class="flex items-center gap-2">
-        <ModeToggle />
-        {{#if (eq auth "better-auth")}}
-        <UserMenu />
-        {{/if}}
-      </div>
-    </div>
-    <USeparator />
-  </div>
+  <UHeader>
+    <template #left>
+      <UNavigationMenu :items="items" />
+    </template>
+
+    <template #right>
+      <UColorModeButton />
+      {{#if (eq auth "better-auth")}}
+      <UserMenu />
+      {{/if}}
+    </template>
+
+    <template #body>
+      <UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
+    </template>
+  </UHeader>
 </template>

package/templates/frontend/nuxt/app/layouts/default.vue.hbs

@@ -1,11 +1,10 @@
-<script setup>
-</script>
+<script setup></script>
 
 <template>
-    <div class="grid grid-rows-[auto_1fr] h-svh">
-        <Header />
-        <main class="overflow-y-auto">
-            <slot />
-        </main>
-    </div>
+  <div class="grid grid-rows-[auto_1fr] h-svh">
+    <Header />
+    <UMain>
+      <slot />
+    </UMain>
+  </div>
 </template>

package/templates/frontend/nuxt/app/pages/index.vue.hbs

@@ -4,8 +4,8 @@ import { api } from "@{{ projectName }}/backend/convex/_generated/api";
 import { useConvexQuery } from "convex-vue";
 {{else}}
   {{#unless (eq api "none")}}
-  const { $orpc } = useNuxtApp()
-  import { useQuery } from '@tanstack/vue-query'
+const { $orpc } = useNuxtApp()
+import { useQuery } from '@tanstack/vue-query'
   {{/unless}}
 {{/if}}
 
@@ -29,50 +29,69 @@ const TITLE_TEXT = `
 const healthCheck = useConvexQuery(api.healthCheck.get, {});
 {{else}}
   {{#unless (eq api "none")}}
-  const healthCheck = useQuery($orpc.healthCheck.queryOptions())
+const healthCheck = useQuery($orpc.healthCheck.queryOptions())
   {{/unless}}
 {{/if}}
 </script>
 
 <template>
-  <div class="container mx-auto max-w-3xl px-4 py-2">
+  <UContainer class="py-8">
     <pre class="overflow-x-auto font-mono text-sm whitespace-pre-wrap">\{{ TITLE_TEXT }}</pre>
-    <div class="grid gap-6 mt-4">
-      <section class="rounded-lg border p-4">
-        <h2 class="mb-2 font-medium">API Status</h2>
+
+    <div class="grid gap-6 mt-6">
+      <UCard>
+        <template #header>
+          <div class="font-medium">API Status</div>
+        </template>
+
+        {{#if (eq backend "convex")}}
+        <div class="flex items-center gap-2">
+          <UIcon
+            :name="healthCheck === undefined ? 'i-lucide-loader-2' : healthCheck.data.value === 'OK' ? 'i-lucide-check-circle' : 'i-lucide-x-circle'"
+            :class="[
+              healthCheck === undefined ? 'animate-spin text-muted' : '',
+              healthCheck?.data.value === 'OK' ? 'text-success' : 'text-error'
+            ]"
+          />
+          <span class="text-sm">
+            \{{
+              healthCheck === undefined
+                ? "Checking..."
+                : healthCheck.data.value === "OK"
+                  ? "Connected"
+                  : "Error"
+            }}
+          </span>
+        </div>
+        {{else}}
+        {{#unless (eq api "none")}}
         <div class="flex items-center gap-2">
-          {{#if (eq backend "convex")}}
-            <span class="text-sm text-muted-foreground">
-              \{{
-                healthCheck === undefined
-                  ? "Checking..."
-                  : healthCheck.data.value === "OK"
-                    ? "Connected"
-                    : "Error"
-              }}
-            </span>
-          {{else}}
-            {{#unless (eq api "none")}}
-            <div class="flex items-center gap-2">
-              <span class="text-sm text-muted-foreground">
-                <template v-if="healthCheck.status.value === 'pending'">
-                  Checking...
-                </template>
-                <template v-else-if="healthCheck.status.value === 'success'">
-                  Connected (\{{ healthCheck.data.value }})
-                </template>
-                <template v-else-if="healthCheck.status.value === 'error'">
-                  Error: \{{ healthCheck.error.value?.message || 'Failed to connect' }}
-                </template>
-                 <template v-else>
-                  Idle
-                </template>
-              </span>
-            </div>
-            {{/unless}}
-          {{/if}}
+          <UIcon
+            :name="healthCheck.isLoading.value ? 'i-lucide-loader-2' : healthCheck.isSuccess.value ? 'i-lucide-check-circle' : 'i-lucide-x-circle'"
+            :class="[
+              healthCheck.isLoading.value ? 'animate-spin text-muted' : '',
+              healthCheck.isSuccess.value ? 'text-success' : '',
+              healthCheck.isError.value ? 'text-error' : ''
+            ]"
+          />
+          <span class="text-sm">
+            <template v-if="healthCheck.isLoading.value">
+              Checking...
+            </template>
+            <template v-else-if="healthCheck.isSuccess.value">
+              Connected (\{{ healthCheck.data.value }})
+            </template>
+            <template v-else-if="healthCheck.isError.value">
+              Error: \{{ healthCheck.error.value?.message || 'Failed to connect' }}
+            </template>
+            <template v-else>
+              Idle
+            </template>
+          </span>
         </div>
-      </section>
+        {{/unless}}
+        {{/if}}
+      </UCard>
     </div>
-  </div>
+  </UContainer>
 </template>

package/templates/frontend/nuxt/package.json.hbs

@@ -10,7 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@nuxt/ui": "^4.0.0",
+    "@nuxt/ui": "4.2.1",
     "@nuxt/content": "^3.7.1",
     "@nuxtjs/mdc": "^0.17.4",
     "nuxt": "^4.1.2",

package/templates/frontend/react/tanstack-router/package.json.hbs

@@ -30,7 +30,7 @@
 	"devDependencies": {
 		"@tanstack/react-router-devtools": "^1.141.1",
 		"@tanstack/router-plugin": "^1.141.1",
-		"@types/node": "^22.13.13",
+		"@types/node": "^22.13.14",
 		"@types/react": "19.2.7",
 		"@types/react-dom": "19.2.3",
 		"@vitejs/plugin-react": "^4.3.4",

package/templates/frontend/react/web-base/src/components/ui/skeleton.tsx.hbs

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

package/templates/frontend/nuxt/app/components/Loader.vue.hbs

@@ -1,5 +0,0 @@
-<template>
-  <div class="flex h-full items-center justify-center pt-8">
-    <UIcon name="i-lucide-loader-2" class="animate-spin text-2xl" />
-  </div>
-</template>

package/templates/frontend/nuxt/app/components/ModeToggle.vue.hbs

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-const colorMode = useColorMode()
-
-const isDark = computed({
-  get () {
-    return colorMode.value === 'dark'
-  },
-  set (value) {
-    colorMode.preference = value ? 'dark' : 'light'
-  }
-})
-</script>
-
-<template>
-  <div class="flex items-center">
-    <USwitch
-      v-model="isDark"
-      :checked-icon="isDark ? 'i-lucide-moon' : ''"
-      :unchecked-icon="!isDark ? 'i-lucide-sun' : ''"
-      class="mr-2"
-    />
-  </div>
-</template>