@tanstack/create 0.61.1 → 0.61.3

package/dist/frameworks/react/examples/events/assets/src/components/TalkCard.tsx

@@ -3,7 +3,7 @@ import { Clock, User } from 'lucide-react'
 
 import { type Talk } from 'content-collections'
 
-import { Card, CardContent } from '@/components/ui/card'
+import { Card, CardContent } from '#/components/ui/card'
 
 interface TalkCardProps {
   talk: Talk

package/dist/frameworks/react/examples/events/assets/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { cn } from '@/lib/utils'
+import { cn } from '#/lib/utils'
 
 function Card({ className, ...props }: React.ComponentProps<'div'>) {
   return (

package/dist/frameworks/react/examples/events/assets/src/routes/api.remy-chat.ts

@@ -11,7 +11,7 @@ import {
   getAllSpeakers,
   getAllTalks,
   searchConference,
-} from '@/lib/conference-tools'
+} from '#/lib/conference-tools'
 
 export const Route = createFileRoute('/api/remy-chat')({
   server: {

package/dist/frameworks/react/examples/events/assets/src/routes/index.tsx

@@ -3,10 +3,10 @@ import { ArrowRight, Calendar, MapPin, Users } from 'lucide-react'
 
 import { allSpeakers, allTalks } from 'content-collections'
 
-import SpeakerCard from '@/components/SpeakerCard'
-import TalkCard from '@/components/TalkCard'
-import RemyAssistant from '@/components/RemyAssistant'
-import HeroCarousel from '@/components/HeroCarousel'
+import SpeakerCard from '#/components/SpeakerCard'
+import TalkCard from '#/components/TalkCard'
+import RemyAssistant from '#/components/RemyAssistant'
+import HeroCarousel from '#/components/HeroCarousel'
 
 export const Route = createFileRoute('/')({
   component: HomePage,

package/dist/frameworks/react/examples/events/assets/src/routes/schedule.index.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react'
 
 import { allTalks, allSpeakers } from 'content-collections'
 
-import RemyAssistant from '@/components/RemyAssistant'
+import RemyAssistant from '#/components/RemyAssistant'
 
 export const Route = createFileRoute('/schedule/')({
   component: SchedulePage,

package/dist/frameworks/react/examples/events/assets/src/routes/speakers.$slug.tsx

@@ -5,8 +5,8 @@ import { Link } from '@tanstack/react-router'
 
 import { allSpeakers, allTalks } from 'content-collections'
 
-import RemyAssistant from '@/components/RemyAssistant'
-import TalkCard from '@/components/TalkCard'
+import RemyAssistant from '#/components/RemyAssistant'
+import TalkCard from '#/components/TalkCard'
 
 export const Route = createFileRoute('/speakers/$slug')({
   loader: async ({ params }) => {

package/dist/frameworks/react/examples/events/assets/src/routes/speakers.index.tsx

@@ -2,8 +2,8 @@ import { createFileRoute } from '@tanstack/react-router'
 
 import { allSpeakers } from 'content-collections'
 
-import SpeakerCard from '@/components/SpeakerCard'
-import RemyAssistant from '@/components/RemyAssistant'
+import SpeakerCard from '#/components/SpeakerCard'
+import RemyAssistant from '#/components/RemyAssistant'
 
 export const Route = createFileRoute('/speakers/')({
   component: SpeakersPage,

package/dist/frameworks/react/examples/events/assets/src/routes/talks.$slug.tsx

@@ -4,7 +4,7 @@ import { Clock, User, ArrowLeft, Tag } from 'lucide-react'
 
 import { allTalks, allSpeakers } from 'content-collections'
 
-import RemyAssistant from '@/components/RemyAssistant'
+import RemyAssistant from '#/components/RemyAssistant'
 
 export const Route = createFileRoute('/talks/$slug')({
   loader: async ({ params }) => {

package/dist/frameworks/react/examples/events/assets/src/routes/talks.index.tsx

@@ -2,8 +2,8 @@ import { createFileRoute } from '@tanstack/react-router'
 
 import { allTalks } from 'content-collections'
 
-import TalkCard from '@/components/TalkCard'
-import RemyAssistant from '@/components/RemyAssistant'
+import TalkCard from '#/components/TalkCard'
+import RemyAssistant from '#/components/RemyAssistant'
 
 export const Route = createFileRoute('/talks/')({
   component: TalksPage,

package/dist/frameworks/react/examples/resume/assets/src/components/ResumeAssistant.tsx

@@ -3,8 +3,8 @@ import { Send, X, Briefcase, UserCheck } from "lucide-react";
 import { Streamdown } from "streamdown";
 import { Store } from "@tanstack/store";
 
-import { useResumeChat } from "@/lib/resume-ai-hook";
-import type { ResumeChatMessages } from "@/lib/resume-ai-hook";
+import { useResumeChat } from "#/lib/resume-ai-hook";
+import type { ResumeChatMessages } from "#/lib/resume-ai-hook";
 
 function Messages({ messages }: { messages: ResumeChatMessages }) {
   const messagesContainerRef = useRef<HTMLDivElement>(null);

package/dist/frameworks/react/examples/resume/assets/src/components/ui/badge.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "#/lib/utils"
 
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",

package/dist/frameworks/react/examples/resume/assets/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "#/lib/utils"
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/dist/frameworks/react/examples/resume/assets/src/components/ui/checkbox.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { CheckIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "#/lib/utils"
 
 function Checkbox({
   className,

package/dist/frameworks/react/examples/resume/assets/src/components/ui/hover-card.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 
-import { cn } from "@/lib/utils"
+import { cn } from "#/lib/utils"
 
 function HoverCard({
   ...props

package/dist/frameworks/react/examples/resume/assets/src/components/ui/separator.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
 
-import { cn } from "@/lib/utils"
+import { cn } from "#/lib/utils"
 
 function Separator({
   className,

package/dist/frameworks/react/examples/resume/assets/src/routes/api.resume-chat.ts

@@ -10,7 +10,7 @@ import {
   getAllJobs,
   getAllEducation,
   searchExperience,
-} from '@/lib/resume-tools'
+} from '#/lib/resume-tools'
 
 export const Route = createFileRoute('/api/resume-chat')({
   server: {

package/dist/frameworks/react/examples/resume/assets/src/routes/index.tsx

@@ -3,17 +3,17 @@ import { marked } from 'marked'
 
 import { createFileRoute } from '@tanstack/react-router'
 import { allJobs, allEducations } from 'content-collections'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Badge } from '@/components/ui/badge'
-import { Separator } from '@/components/ui/separator'
+import { Card, CardContent, CardHeader, CardTitle } from '#/components/ui/card'
+import { Checkbox } from '#/components/ui/checkbox'
+import { Badge } from '#/components/ui/badge'
+import { Separator } from '#/components/ui/separator'
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from '@/components/ui/hover-card'
+} from '#/components/ui/hover-card'
 
-import ResumeAssistant from '@/components/ResumeAssistant'
+import ResumeAssistant from '#/components/ResumeAssistant'
 
 export const Route = createFileRoute('/')({
   component: App,

package/dist/frameworks/react/project/base/package.json

@@ -2,6 +2,9 @@
   "name": "",
   "private": true,
   "type": "module",
+  "imports": {
+    "#/*": "./src/*"
+  },
   "scripts": {
     "dev": "vite dev --port 3000",
     "build": "vite build",
@@ -16,8 +19,7 @@
     "@tanstack/react-start": "^1.132.0",
     "lucide-react": "^0.561.0",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "vite-tsconfig-paths": "^5.1.4"
+    "react-dom": "^19.2.0"
   },
   "devDependencies": {
     "@tanstack/devtools-vite": "^0.3.11",
@@ -29,6 +31,7 @@
     "jsdom": "^27.0.0",
     "typescript": "^5.7.2",
     "vite": "^7.1.7",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.5"
   }
 }

package/dist/frameworks/react/project/base/src/routes/__root.tsx.ejs

@@ -8,7 +8,7 @@ import Header from '../components/Header'
 <% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>
 import <%= integration.jsName %> from '<%= relativePath(integration.path, true) %>'
 <% } %><% if (addOnEnabled.paraglide) { %>
-import { getLocale } from '@/paraglide/runtime'
+import { getLocale } from '#/paraglide/runtime'
 <% } %>
 import appCss from '../styles.css?url'
 <% if (addOnEnabled["apollo-client"]) { %>
@@ -17,7 +17,7 @@ import type { ApolloClientIntegration } from "@apollo/client-integration-tanstac
 <% if (addOnEnabled["tanstack-query"]) { %>
 import type { QueryClient } from '@tanstack/react-query'
 <% if (addOnEnabled.tRPC) { %>
-import type { TRPCRouter } from '@/integrations/trpc/router'
+import type { TRPCRouter } from '#/integrations/trpc/router'
 import type { TRPCOptionsProxy } from '@trpc/tanstack-react-query'
 <% } %>
 <% } %>

package/dist/frameworks/react/project/base/tsconfig.json.ejs

@@ -5,6 +5,10 @@
     "target": "ES2022",
     "jsx": "react-jsx",
     "module": "ESNext",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "types": ["vite/client"],
 
@@ -21,10 +25,6 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "noUncheckedSideEffectImports": true
   }
 }

package/dist/frameworks/react/project/base/vite.config.ts.ejs

@@ -1,31 +1,22 @@
 import { defineConfig } from 'vite'
 import { devtools } from '@tanstack/devtools-vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
 <% if (addOnEnabled.paraglide) { -%>
 import { paraglideVitePlugin } from "@inlang/paraglide-js"
 <% } -%>
 import { tanstackStart } from '@tanstack/react-start/plugin/vite';
 import viteReact from '@vitejs/plugin-react'
-import viteTsConfigPaths from 'vite-tsconfig-paths'
-import { fileURLToPath, URL } from 'node:url'
 import tailwindcss from "@tailwindcss/vite"
 <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
 <% } %>
 
 const config = defineConfig({
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-    },
-  },
   plugins: [devtools(), <% if (addOnEnabled.paraglide) { %>paraglideVitePlugin({
     project: './project.inlang',
     outdir: './src/paraglide',
     strategy: ['url'],
   }), <% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
-    // this is the plugin that enables path aliases
-    viteTsConfigPaths({
-      projects: ['./tsconfig.json'],
-    }),
+    tsconfigPaths({ projects: ['./tsconfig.json'] }),
     tailwindcss(),
     tanstackStart(),
     viteReact(<% if (addOnEnabled.compiler) { %>{

package/dist/frameworks/react/toolchains/eslint/assets/eslint.config.js

@@ -2,4 +2,19 @@
 
 import { tanstackConfig } from '@tanstack/eslint-config'
 
-export default [...tanstackConfig]
+export default [
+  ...tanstackConfig,
+  {
+    rules: {
+      'import/no-cycle': 'off',
+      'import/order': 'off',
+      'sort-imports': 'off',
+      '@typescript-eslint/array-type': 'off',
+      '@typescript-eslint/require-await': 'off',
+      'pnpm/json-enforce-catalog': 'off',
+    },
+  },
+  {
+    ignores: ['eslint.config.js', 'prettier.config.js'],
+  },
+]

package/dist/frameworks/solid/toolchains/eslint/assets/eslint.config.js

@@ -2,4 +2,19 @@
 
 import { tanstackConfig } from "@tanstack/eslint-config";
 
-export default [...tanstackConfig];
+export default [
+  ...tanstackConfig,
+  {
+    rules: {
+      "import/no-cycle": "off",
+      "import/order": "off",
+      "sort-imports": "off",
+      "@typescript-eslint/array-type": "off",
+      "@typescript-eslint/require-await": "off",
+      "pnpm/json-enforce-catalog": "off",
+    },
+  },
+  {
+    ignores: ["eslint.config.js", "prettier.config.js"],
+  },
+];

package/dist/package-json.js

@@ -1,5 +1,6 @@
 import { render } from 'ejs';
-import { sortObject } from './utils.js';
+import { formatCommand, sortObject } from './utils.js';
+import { getPackageManagerExecuteCommand } from './package-manager.js';
 export function mergePackageJSON(packageJSON, overlayPackageJSON) {
     return {
         ...packageJSON,
@@ -19,6 +20,10 @@ export function mergePackageJSON(packageJSON, overlayPackageJSON) {
     };
 }
 export function createPackageJSON(options) {
+    const packageManager = options.packageManager;
+    function getPackageManagerExecuteScript(pkg, args = []) {
+        return formatCommand(getPackageManagerExecuteCommand(packageManager, pkg, args));
+    }
     let packageJSON = {
         ...JSON.parse(JSON.stringify(options.framework.basePackageJSON)),
         name: options.projectName,
@@ -50,6 +55,7 @@ export function createPackageJSON(options) {
                 }, {}),
                 addOnOption: options.addOnOptions,
                 addOns: options.chosenAddOns,
+                getPackageManagerExecuteScript,
             };
             try {
                 const renderedTemplate = render(addOn.packageTemplate, templateValues);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/create",
-  "version": "0.61.1",
+  "version": "0.61.3",
   "description": "TanStack Application Builder Engine",
   "type": "module",
   "main": "./dist/index.js",

package/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx

@@ -5,8 +5,8 @@ import { Store } from '@tanstack/store'
 import { Send, X, ChevronRight, BotIcon } from 'lucide-react'
 import { Streamdown } from 'streamdown'
 
-import { useGuitarRecommendationChat } from '@/lib/demo-ai-hook'
-import type { ChatMessages } from '@/lib/demo-ai-hook'
+import { useGuitarRecommendationChat } from '#/lib/demo-ai-hook'
+import type { ChatMessages } from '#/lib/demo-ai-hook'
 
 import GuitarRecommendation from './demo-GuitarRecommendation'
 

package/src/frameworks/react/add-ons/ai/assets/src/components/demo-GuitarRecommendation.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from '@tanstack/react-router'
 
 import { showAIAssistant } from './demo-AIAssistant'
 
-import guitars from '@/data/demo-guitars'
+import guitars from '#/data/demo-guitars'
 
 export default function GuitarRecommendation({ id }: { id: string }) {
   const navigate = useNavigate()

package/src/frameworks/react/add-ons/ai/assets/src/lib/demo-ai-hook.ts

@@ -6,7 +6,7 @@ import {
 import type { InferChatMessages } from '@tanstack/ai-react'
 import { clientTools } from '@tanstack/ai-client'
 
-import { recommendGuitarToolDef } from '@/lib/demo-guitar-tools'
+import { recommendGuitarToolDef } from '#/lib/demo-guitar-tools'
 
 const recommendGuitarToolClient = recommendGuitarToolDef.client(({ id }) => ({
   id: +id,

package/src/frameworks/react/add-ons/ai/assets/src/lib/demo-guitar-tools.ts

@@ -1,6 +1,6 @@
 import { toolDefinition } from '@tanstack/ai'
 import { z } from 'zod'
-import guitars from '@/data/demo-guitars'
+import guitars from '#/data/demo-guitars'
 
 // Tool definition for getting guitars
 export const getGuitarsToolDef = toolDefinition({

package/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.tsx

@@ -11,12 +11,12 @@ import {
 } from 'lucide-react'
 import { Streamdown } from 'streamdown'
 
-import { useGuitarRecommendationChat } from '@/lib/demo-ai-hook'
-import type { ChatMessages } from '@/lib/demo-ai-hook'
-import { useAudioRecorder } from '@/hooks/demo-useAudioRecorder'
-import { useTTS } from '@/hooks/demo-useTTS'
+import { useGuitarRecommendationChat } from '#/lib/demo-ai-hook'
+import type { ChatMessages } from '#/lib/demo-ai-hook'
+import { useAudioRecorder } from '#/hooks/demo-useAudioRecorder'
+import { useTTS } from '#/hooks/demo-useTTS'
 
-import GuitarRecommendation from '@/components/demo-GuitarRecommendation'
+import GuitarRecommendation from '#/components/demo-GuitarRecommendation'
 
 import './ai-chat.css'
 

package/src/frameworks/react/add-ons/ai/assets/src/routes/demo/api.ai.chat.ts

@@ -5,7 +5,7 @@ import { openaiText } from '@tanstack/ai-openai'
 import { geminiText } from '@tanstack/ai-gemini'
 import { ollamaText } from '@tanstack/ai-ollama'
 
-import { getGuitars, recommendGuitarToolDef } from '@/lib/demo-guitar-tools'
+import { getGuitars, recommendGuitarToolDef } from '#/lib/demo-guitar-tools'
 
 const SYSTEM_PROMPT = `You are a helpful assistant for a store that sells guitars.
 

package/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/$guitarId.tsx

@@ -1,6 +1,6 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
 
-import guitars from '@/data/demo-guitars'
+import guitars from '#/data/demo-guitars'
 
 export const Route = createFileRoute('/demo/guitars/$guitarId')({
   component: RouteComponent,

package/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/index.tsx

@@ -1,6 +1,6 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
 
-import guitars from '@/data/demo-guitars'
+import guitars from '#/data/demo-guitars'
 
 export const Route = createFileRoute('/demo/guitars/')({
   component: GuitarsIndex,

package/src/frameworks/react/add-ons/better-auth/assets/src/integrations/better-auth/header-user.tsx

@@ -1,4 +1,4 @@
-import { authClient } from "@/lib/auth-client";
+import { authClient } from "#/lib/auth-client";
 import { Link } from "@tanstack/react-router";
 
 export default function BetterAuthHeader() {

package/src/frameworks/react/add-ons/better-auth/assets/src/routes/api/auth/$.ts

@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { auth } from '@/lib/auth'
+import { auth } from '#/lib/auth'
 
 export const Route = createFileRoute('/api/auth/$')({
   server: {

package/src/frameworks/react/add-ons/better-auth/assets/src/routes/demo/better-auth.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
-import { authClient } from "@/lib/auth-client";
+import { authClient } from "#/lib/auth-client";
 
 export const Route = createFileRoute("/demo/better-auth")({
   component: BetterAuthDemo,

package/src/frameworks/react/add-ons/convex/assets/src/routes/demo/convex.tsx

@@ -4,7 +4,7 @@ import { useQuery, useMutation } from 'convex/react'
 import { Trash2, Plus, Check, Circle } from 'lucide-react'
 
 import { api } from '../../../convex/_generated/api'
-import { Id } from '../../../convex/_generated/dataModel'
+import type { Id } from '../../../convex/_generated/dataModel'
 
 export const Route = createFileRoute('/demo/convex')({
   ssr: false,

package/src/frameworks/react/add-ons/db/assets/src/components/demo.chat-area.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-import { useChat, useMessages } from '@/hooks/demo.useChat'
+import { useChat, useMessages } from '#/hooks/demo.useChat'
 
 import Messages from './demo.messages'
 

package/src/frameworks/react/add-ons/db/assets/src/components/demo.messages.tsx

@@ -1,4 +1,4 @@
-import type { Message } from '@/db-collections'
+import type { Message } from '#/db-collections'
 
 export const getAvatarColor = (username: string) => {
   const colors = [

package/src/frameworks/react/add-ons/db/assets/src/hooks/demo.useChat.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { useLiveQuery } from '@tanstack/react-db'
 
-import { messagesCollection, type Message } from '@/db-collections'
+import { messagesCollection, type Message } from '#/db-collections'
 
 import type { Collection } from '@tanstack/react-db'
 

package/src/frameworks/react/add-ons/db/assets/src/routes/demo/db-chat.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 
-import ChatArea from '@/components/demo.chat-area'
+import ChatArea from '#/components/demo.chat-area'
 
 export const Route = createFileRoute('/demo/db-chat')({
   component: App,

package/src/frameworks/react/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx.ejs

@@ -1,8 +1,8 @@
 import { createFileRoute, useRouter } from '@tanstack/react-router'
 import { createServerFn } from '@tanstack/react-start'
-import { db } from '@/db/index'
+import { db } from '#/db/index'
 import { desc } from 'drizzle-orm'
-import { todos } from '@/db/schema'
+import { todos } from '#/db/schema'
 
 const getTodos = createServerFn({
   method: 'GET',

package/src/frameworks/react/add-ons/form/assets/src/components/demo.FormComponents.tsx.ejs

@@ -1,14 +1,14 @@
 import { useStore } from '@tanstack/react-form'
 
-import { useFieldContext, useFormContext } from '@/hooks/demo.form-context'
+import { useFieldContext, useFormContext } from '#/hooks/demo.form-context'
 <% if (addOnEnabled.shadcn) { %>
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Textarea as ShadcnTextarea } from '@/components/ui/textarea'
-import * as ShadcnSelect from '@/components/ui/select'
-import { Slider as ShadcnSlider } from '@/components/ui/slider'
-import { Switch as ShadcnSwitch } from '@/components/ui/switch'
-import { Label } from '@/components/ui/label'
+import { Button } from '#/components/ui/button'
+import { Input } from '#/components/ui/input'
+import { Textarea as ShadcnTextarea } from '#/components/ui/textarea'
+import * as ShadcnSelect from '#/components/ui/select'
+import { Slider as ShadcnSlider } from '#/components/ui/slider'
+import { Switch as ShadcnSwitch } from '#/components/ui/switch'
+import { Label } from '#/components/ui/label'
 
 export function SubscribeButton({ label }: { label: string }) {
   const form = useFormContext()
@@ -117,11 +117,15 @@ export function Select({
         <ShadcnSelect.SelectTrigger className="w-full">
           <ShadcnSelect.SelectValue placeholder={placeholder} />
         </ShadcnSelect.SelectTrigger>
-        <ShadcnSelect.SelectContent>
+        <ShadcnSelect.SelectContent className="bg-background text-foreground">
           <ShadcnSelect.SelectGroup>
             <ShadcnSelect.SelectLabel>{label}</ShadcnSelect.SelectLabel>
             {values.map((value) => (
-              <ShadcnSelect.SelectItem key={value.value} value={value.value}>
+              <ShadcnSelect.SelectItem
+                key={value.value}
+                value={value.value}
+                className="text-foreground"
+              >
                 {value.label}
               </ShadcnSelect.SelectItem>
             ))}
@@ -297,4 +301,4 @@ export function Select({
     </div>
   )
 }
-<% } %>
+<% } %>

package/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.address.tsx.ejs

@@ -1,6 +1,6 @@
 import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
 
-import { useAppForm } from '@/hooks/demo.form'
+import { useAppForm } from '#/hooks/demo.form'
 
 <% if (codeRouter) { %>
 import type { RootRoute } from '@tanstack/react-router'

package/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.simple.tsx.ejs

@@ -1,7 +1,7 @@
 import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
 import { z } from 'zod'
 
-import { useAppForm } from '@/hooks/demo.form'
+import { useAppForm } from '#/hooks/demo.form'
 
 <% if (codeRouter) { %>
   import type { RootRoute } from '@tanstack/react-router'