npm - create-z3 - Versions diffs - 0.0.48 → 0.0.50 - Mend

create-z3 0.0.48 → 0.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.js +22 -20
package/package.json +1 -1
package/templates/nextjs/src/app/(frontend)/layout.tsx +21 -27
package/templates/nextjs/src/components/component-example.tsx +44 -492
package/templates/tanstack-start/package.json +1 -0
package/templates/tanstack-start/pnpm-workspace.yaml +2 -0
package/templates/tanstack-start/src/components/component-example.tsx +14 -14
package/templates/tanstack-start/src/routes/__root.tsx +1 -1

package/dist/index.js CHANGED Viewed

@@ -1730,26 +1730,28 @@ function getAdditionalProviders() {
 // src/installers/string-utils.ts
 import fs3 from "fs-extra";
-var DEFAULT_THEME = `--background: 100% 0.000 0;
---foreground: 3.9% 0.006 240;
---card: 100% 0.000 0;
---card-foreground: 3.9% 0.006 240;
---popover: 100% 0.000 0;
---popover-foreground: 3.9% 0.006 240;
---primary: 10% 0.003 240;
---primary-foreground: 98% 0.000 0;
---secondary: 95.9% 0.002 240;
---secondary-foreground: 10% 0.003 240;
---muted: 95.9% 0.002 240;
---muted-foreground: 46.1% 0.002 240;
---accent: 95.9% 0.002 240;
---accent-foreground: 10% 0.003 240;
---destructive: 60.2% 0.168 0;
---destructive-foreground: 98% 0.000 0;
---border: 90% 0.003 240;
---input: 90% 0.003 240;
---ring: 10% 0.003 240;
---radius: 0.5rem;`;
+var DEFAULT_THEME = `:root {
+  --background: 100% 0.000 0;
+  --foreground: 3.9% 0.006 240;
+  --card: 100% 0.000 0;
+  --card-foreground: 3.9% 0.006 240;
+  --popover: 100% 0.000 0;
+  --popover-foreground: 3.9% 0.006 240;
+  --primary: 10% 0.003 240;
+  --primary-foreground: 98% 0.000 0;
+  --secondary: 95.9% 0.002 240;
+  --secondary-foreground: 10% 0.003 240;
+  --muted: 95.9% 0.002 240;
+  --muted-foreground: 46.1% 0.002 240;
+  --accent: 95.9% 0.002 240;
+  --accent-foreground: 10% 0.003 240;
+  --destructive: 60.2% 0.168 0;
+  --destructive-foreground: 98% 0.000 0;
+  --border: 90% 0.003 240;
+  --input: 90% 0.003 240;
+  --ring: 10% 0.003 240;
+  --radius: 0.5rem;
+}`;
 function detectIndentation(line) {
   const match = line.match(/^(\s*)/);
   return match ? match[1] : "";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-z3",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "type": "module",
   "description": "CLI for scaffolding Z3 Stack applications (TanStack/Next.js + Convex + Better Auth)",
   "bin": {

package/templates/nextjs/src/app/(frontend)/layout.tsx CHANGED Viewed

@@ -1,46 +1,40 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono, Inter } from "next/font/google";
-import "./globals.css";
-import ServerProviders from "~/components/providers/server";
-import ClientProviders from "~/components/providers/client";
-import Head from "next/head";
+import type { Metadata } from "next"
-const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });
+import { Geist, Geist_Mono, Inter } from "next/font/google"
+import "./globals.css"
+import ClientProviders from "~/components/providers/client"
+import ServerProviders from "~/components/providers/server"
+const inter = Inter({ subsets: ["latin"], variable: "--font-sans" })
 const geistSans = Geist({
-  variable: "--font-geist-sans",
   subsets: ["latin"],
-});
+  variable: "--font-geist-sans",
+})
 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
   subsets: ["latin"],
-});
+  variable: "--font-geist-mono",
+})
 export const metadata: Metadata = {
-  title: "Create Next App",
   description: "Generated by create next app",
-};
+  icons: { icon: "/favicons/favicon.ico" },
+  title: "Create Next App",
+}
 export default function RootLayout({
   auth,
   children,
 }: Readonly<{
-  auth: React.ReactNode;
-  children: React.ReactNode;
+  auth: React.ReactNode
+  children: React.ReactNode
 }>) {
   return (
-    <html lang="en" className={inter.variable}>
-      <Head>
-        <link
-          href="/favicons/favicon.ico"
-          rel="shortcut icon"
-          type="image/x-icon"
-        />
-      </Head>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+    <html className={inter.variable} lang="en" suppressHydrationWarning>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
         <ServerProviders>
           <ClientProviders>
             {children}
@@ -49,5 +43,5 @@ export default function RootLayout({
         </ServerProviders>
       </body>
     </html>
-  );
+  )
 }

package/templates/nextjs/src/components/component-example.tsx CHANGED Viewed

@@ -1,503 +1,55 @@
 "use client"
-import * as React from "react"
+import { TerminalIcon, UserIcon } from "lucide-react"
+import Link from "next/link"
-import {
-  Example,
-  ExampleWrapper,
-} from "~/components/example"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "~/components/ui/alert-dialog"
-import { Badge } from "~/components/ui/badge"
+import { signOut, useSession } from "~/auth/client"
 import { Button } from "~/components/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card"
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-} from "~/components/ui/combobox"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu"
-import { Field, FieldGroup, FieldLabel } from "~/components/ui/field"
-import { Input } from "~/components/ui/input"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select"
-import { Textarea } from "~/components/ui/textarea"
-import { PlusIcon, BluetoothIcon, MoreVerticalIcon, FileIcon, FolderIcon, FolderOpenIcon, FileCodeIcon, MoreHorizontalIcon, FolderSearchIcon, SaveIcon, DownloadIcon, EyeIcon, LayoutIcon, PaletteIcon, SunIcon, MoonIcon, MonitorIcon, UserIcon, CreditCardIcon, SettingsIcon, KeyboardIcon, LanguagesIcon, BellIcon, MailIcon, ShieldIcon, HelpCircleIcon, FileTextIcon, LogOutIcon } from "lucide-react"
 import { ThemeToggle } from "~/components/ui/theme-toggle"
 export function ComponentExample() {
-  return (
-    <ExampleWrapper>
-      <ThemeToggle className="absolute w-md:top-10 right-10 top-2" />
-      <CardExample />
-      <FormExample />
-    </ExampleWrapper>
-  )
-}
-function CardExample() {
-  return (
-    <Example title="Card" className="items-center justify-center">
-      <Card className="relative w-full max-w-sm overflow-hidden pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
-        <img
-          src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          alt="Photo by mymind on Unsplash"
-          title="Photo by mymind on Unsplash"
-          className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
-        />
-        <CardHeader>
-          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
-          <CardDescription>
-            Switch to the improved way to explore your data, with natural
-            language. Monitoring will no longer be available on the Pro plan in
-            November, 2025
-          </CardDescription>
-        </CardHeader>
-        <CardFooter>
-          <AlertDialog>
-            <AlertDialogTrigger render={<Button />}>
-              <PlusIcon data-icon="inline-start" />
-              Show Dialog
-            </AlertDialogTrigger>
-            <AlertDialogContent size="sm">
-              <AlertDialogHeader>
-                <AlertDialogMedia>
-                  <BluetoothIcon
-                  />
-                </AlertDialogMedia>
-                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  Do you want to allow the USB accessory to connect to this
-                  device?
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
-                <AlertDialogAction>Allow</AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-          <Badge variant="secondary" className="ml-auto">
-            Warning
-          </Badge>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-const frameworks = [
-  "Next.js",
-  "SvelteKit",
-  "Nuxt.js",
-  "Remix",
-  "Astro",
-] as const
-const roleItems = [
-  { label: "Developer", value: "developer" },
-  { label: "Designer", value: "designer" },
-  { label: "Manager", value: "manager" },
-  { label: "Other", value: "other" },
-]
-function FormExample() {
-  const [notifications, setNotifications] = React.useState({
-    email: true,
-    sms: false,
-    push: true,
-  })
-  const [theme, setTheme] = React.useState("light")
+  const { data: session } = useSession()
   return (
-    <Example title="Form">
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle>User Information</CardTitle>
-          <CardDescription>Please fill in your details below</CardDescription>
-          <CardAction>
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                render={<Button variant="ghost" size="icon" />}
-              >
-                <MoreVerticalIcon
-                />
-                <span className="sr-only">More options</span>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-56">
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>File</DropdownMenuLabel>
-                  <DropdownMenuItem>
-                    <FileIcon
-                    />
-                    New File
-                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <FolderIcon
-                    />
-                    New Folder
-                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <FolderOpenIcon
-                      />
-                      Open Recent
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
-                          <DropdownMenuItem>
-                            <FileCodeIcon
-                            />
-                            Project Alpha
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <FileCodeIcon
-                            />
-                            Project Beta
-                          </DropdownMenuItem>
-                          <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>
-                              <MoreHorizontalIcon
-                              />
-                              More Projects
-                            </DropdownMenuSubTrigger>
-                            <DropdownMenuPortal>
-                              <DropdownMenuSubContent>
-                                <DropdownMenuItem>
-                                  <FileCodeIcon
-                                  />
-                                  Project Gamma
-                                </DropdownMenuItem>
-                                <DropdownMenuItem>
-                                  <FileCodeIcon
-                                  />
-                                  Project Delta
-                                </DropdownMenuItem>
-                              </DropdownMenuSubContent>
-                            </DropdownMenuPortal>
-                          </DropdownMenuSub>
-                        </DropdownMenuGroup>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuGroup>
-                          <DropdownMenuItem>
-                            <FolderSearchIcon
-                            />
-                            Browse...
-                          </DropdownMenuItem>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <SaveIcon
-                    />
-                    Save
-                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <DownloadIcon
-                    />
-                    Export
-                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>View</DropdownMenuLabel>
-                  <DropdownMenuCheckboxItem
-                    checked={notifications.email}
-                    onCheckedChange={(checked) =>
-                      setNotifications({
-                        ...notifications,
-                        email: checked === true,
-                      })
-                    }
-                  >
-                    <EyeIcon
-                    />
-                    Show Sidebar
-                  </DropdownMenuCheckboxItem>
-                  <DropdownMenuCheckboxItem
-                    checked={notifications.sms}
-                    onCheckedChange={(checked) =>
-                      setNotifications({
-                        ...notifications,
-                        sms: checked === true,
-                      })
-                    }
-                  >
-                    <LayoutIcon
-                    />
-                    Show Status Bar
-                  </DropdownMenuCheckboxItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <PaletteIcon
-                      />
-                      Theme
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-                          <DropdownMenuRadioGroup
-                            value={theme}
-                            onValueChange={setTheme}
-                          >
-                            <DropdownMenuRadioItem value="light">
-                              <SunIcon
-                              />
-                              Light
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="dark">
-                              <MoonIcon
-                              />
-                              Dark
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="system">
-                              <MonitorIcon
-                              />
-                              System
-                            </DropdownMenuRadioItem>
-                          </DropdownMenuRadioGroup>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>Account</DropdownMenuLabel>
-                  <DropdownMenuItem>
-                    <UserIcon
-                    />
-                    Profile
-                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <CreditCardIcon
-                    />
-                    Billing
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <SettingsIcon
-                      />
-                      Settings
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>
-                          <DropdownMenuItem>
-                            <KeyboardIcon
-                            />
-                            Keyboard Shortcuts
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <LanguagesIcon
-                            />
-                            Language
-                          </DropdownMenuItem>
-                          <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>
-                              <BellIcon
-                              />
-                              Notifications
-                            </DropdownMenuSubTrigger>
-                            <DropdownMenuPortal>
-                              <DropdownMenuSubContent>
-                                <DropdownMenuGroup>
-                                  <DropdownMenuLabel>
-                                    Notification Types
-                                  </DropdownMenuLabel>
-                                  <DropdownMenuCheckboxItem
-                                    checked={notifications.push}
-                                    onCheckedChange={(checked) =>
-                                      setNotifications({
-                                        ...notifications,
-                                        push: checked === true,
-                                      })
-                                    }
-                                  >
-                                    <BellIcon
-                                    />
-                                    Push Notifications
-                                  </DropdownMenuCheckboxItem>
-                                  <DropdownMenuCheckboxItem
-                                    checked={notifications.email}
-                                    onCheckedChange={(checked) =>
-                                      setNotifications({
-                                        ...notifications,
-                                        email: checked === true,
-                                      })
-                                    }
-                                  >
-                                    <MailIcon
-                                    />
-                                    Email Notifications
-                                  </DropdownMenuCheckboxItem>
-                                </DropdownMenuGroup>
-                              </DropdownMenuSubContent>
-                            </DropdownMenuPortal>
-                          </DropdownMenuSub>
-                        </DropdownMenuGroup>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuGroup>
-                          <DropdownMenuItem>
-                            <ShieldIcon
-                            />
-                            Privacy & Security
-                          </DropdownMenuItem>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <HelpCircleIcon
-                    />
-                    Help & Support
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <FileTextIcon
-                    />
-                    Documentation
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem variant="destructive">
-                    <LogOutIcon
-                    />
-                    Sign Out
-                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <form>
-            <FieldGroup>
-              <div className="grid grid-cols-2 gap-4">
-                <Field>
-                  <FieldLabel htmlFor="small-form-name">Name</FieldLabel>
-                  <Input
-                    id="small-form-name"
-                    placeholder="Enter your name"
-                    required
-                  />
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="small-form-role">Role</FieldLabel>
-                  <Select items={roleItems} defaultValue={null}>
-                    <SelectTrigger id="small-form-role">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        {roleItems.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            {item.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </div>
-              <Field>
-                <FieldLabel htmlFor="small-form-framework">
-                  Framework
-                </FieldLabel>
-                <Combobox items={frameworks}>
-                  <ComboboxInput
-                    id="small-form-framework"
-                    placeholder="Select a framework"
-                    required
-                  />
-                  <ComboboxContent>
-                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>
-                    <ComboboxList>
-                      {(item) => (
-                        <ComboboxItem key={item} value={item}>
-                          {item}
-                        </ComboboxItem>
-                      )}
-                    </ComboboxList>
-                  </ComboboxContent>
-                </Combobox>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="small-form-comments">Comments</FieldLabel>
-                <Textarea
-                  id="small-form-comments"
-                  placeholder="Add any additional comments"
-                />
-              </Field>
-              <Field orientation="horizontal">
-                <Button type="submit">Submit</Button>
-                <Button variant="outline" type="button">
-                  Cancel
-                </Button>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </Example>
+    <div className="bg-background flex min-h-screen flex-col items-center justify-center gap-8 p-6 text-center">
+      <div className="absolute top-4 right-4 flex items-center gap-2">
+        {session?.user && (
+          <>
+            <div className="bg-muted flex size-8 items-center justify-center rounded-full">
+              <UserIcon className="text-muted-foreground size-4" />
+            </div>
+            <span className="text-sm font-medium">{session.user.name}</span>
+          </>
+        )}
+        <ThemeToggle />
+      </div>
+      <div className="flex flex-col items-center gap-4">
+        <div className="bg-foreground text-background flex size-14 items-center justify-center rounded-2xl">
+          <TerminalIcon className="size-7" />
+        </div>
+        <div className="flex flex-col gap-1">
+          <h1 className="text-3xl font-bold tracking-tight">create-z3-app</h1>
+          <p className="text-muted-foreground max-w-sm text-base">
+            A full-stack starter with Next.js, Convex, and Better Auth — ready to ship.
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-3">
+        {session?.user ? (
+          <Button variant="outline" onClick={() => signOut()}>Sign out</Button>
+        ) : (
+          <>
+            <Button nativeButton={false} render={<Link href="/auth/sign-up" />}>Sign up</Button>
+            <Button nativeButton={false} variant="outline" render={<Link href="/auth/sign-in" />}>Sign in</Button>
+          </>
+        )}
+      </div>
+      <code className="bg-muted text-muted-foreground rounded-lg px-4 py-2 text-sm font-mono">
+        npm create z3-app@latest
+      </code>
+    </div>
   )
 }

package/templates/tanstack-start/package.json CHANGED Viewed

@@ -13,6 +13,7 @@
     "format": "prettier --write . --cache",
     "format:check": "prettier --check . --cache",
     "validate": "pnpm run typecheck && pnpm run lint && pnpm run format:check",
+    "convex": "convex",
     "secret:create": "openssl rand -hex 32 | tr -d '\\n' | pbcopy && echo '✅ Secret generated and copied to clipboard!'"
   },
   "dependencies": {

package/templates/tanstack-start/pnpm-workspace.yaml ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ packages:
2	+ - .

package/templates/tanstack-start/src/components/component-example.tsx CHANGED Viewed

@@ -3,20 +3,24 @@ import { TerminalIcon, UserIcon } from 'lucide-react'
 import { signOut, useSession } from '~/lib/auth/client'
 import { Button } from '~/components/ui/button'
+import { ThemeToggle } from '~/components/ui/theme-toggle'
 export function ComponentExample() {
   const { data: session } = useSession()
   return (
     <div className="bg-background flex min-h-screen flex-col items-center justify-center gap-8 p-6 text-center">
-      {session?.user && (
-        <div className="absolute top-4 right-4 flex items-center gap-2">
-          <div className="bg-muted flex size-8 items-center justify-center rounded-full">
-            <UserIcon className="text-muted-foreground size-4" />
-          </div>
-          <span className="text-sm font-medium">{session.user.name}</span>
-        </div>
-      )}
+      <div className="absolute top-4 right-4 flex items-center gap-2">
+        {session?.user && (
+          <>
+            <div className="bg-muted flex size-8 items-center justify-center rounded-full">
+              <UserIcon className="text-muted-foreground size-4" />
+            </div>
+            <span className="text-sm font-medium">{session.user.name}</span>
+          </>
+        )}
+        <ThemeToggle />
+      </div>
       <div className="flex flex-col items-center gap-4">
         <div className="bg-foreground text-background flex size-14 items-center justify-center rounded-2xl">
@@ -35,12 +39,8 @@ export function ComponentExample() {
           <Button variant="outline" onClick={() => signOut()}>Sign out</Button>
         ) : (
           <>
-            <Button asChild>
-              <Link to="/auth/$authView" params={{ authView: 'sign-up' }}>Sign up</Link>
-            </Button>
-            <Button variant="outline" asChild>
-              <Link to="/auth/$authView" params={{ authView: 'sign-in' }}>Sign in</Link>
-            </Button>
+            <Button nativeButton={false} render={<Link to="/auth/$authView" params={{ authView: 'sign-up' }} />}>Sign up</Button>
+            <Button nativeButton={false} variant="outline" render={<Link to="/auth/$authView" params={{ authView: 'sign-in' }} />}>Sign in</Button>
           </>
         )}
       </div>

package/templates/tanstack-start/src/routes/__root.tsx CHANGED Viewed

@@ -63,7 +63,7 @@ function RootComponent() {
 function RootDocument({ children }: { children: React.ReactNode }) {
   const theme = Route.useLoaderData()
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <HeadContent />
       </head>