@tanstack/create 0.62.1 → 0.63.0

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 (167) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/create-app.js +3 -1
  3. package/dist/frameworks/react/add-ons/ai/package.json +3 -3
  4. package/dist/frameworks/react/add-ons/apollo-client/package.json +2 -2
  5. package/dist/frameworks/react/add-ons/better-auth/package.json +1 -1
  6. package/dist/frameworks/react/add-ons/clerk/package.json +1 -1
  7. package/dist/frameworks/react/add-ons/convex/package.json +2 -2
  8. package/dist/frameworks/react/add-ons/db/package.json +3 -3
  9. package/dist/frameworks/react/add-ons/drizzle/package.json.ejs +5 -5
  10. package/dist/frameworks/react/add-ons/form/package.json +2 -2
  11. package/dist/frameworks/react/add-ons/mcp/package.json +2 -2
  12. package/dist/frameworks/react/add-ons/neon/package.json +2 -2
  13. package/dist/frameworks/react/add-ons/oRPC/package.json +7 -7
  14. package/dist/frameworks/react/add-ons/paraglide/package.json +1 -1
  15. package/dist/frameworks/react/add-ons/posthog/package.json +2 -2
  16. package/dist/frameworks/react/add-ons/prisma/package.json.ejs +7 -7
  17. package/dist/frameworks/react/add-ons/sentry/package.json +1 -1
  18. package/dist/frameworks/react/add-ons/shadcn/package.json +1 -1
  19. package/dist/frameworks/react/add-ons/store/package.json +3 -3
  20. package/dist/frameworks/react/add-ons/storybook/package.json +2 -2
  21. package/dist/frameworks/react/add-ons/strapi/package.json +2 -2
  22. package/dist/frameworks/react/add-ons/t3env/package.json +2 -2
  23. package/dist/frameworks/react/add-ons/tRPC/package.json +4 -4
  24. package/dist/frameworks/react/add-ons/table/package.json +3 -3
  25. package/dist/frameworks/react/add-ons/tanstack-query/package.json +2 -2
  26. package/dist/frameworks/react/add-ons/workos/package.json +2 -2
  27. package/dist/frameworks/react/examples/events/package.json +3 -3
  28. package/dist/frameworks/react/examples/resume/package.json +2 -2
  29. package/dist/frameworks/react/hosts/cloudflare/package.json.ejs +2 -2
  30. package/dist/frameworks/react/hosts/netlify/package.json +1 -1
  31. package/dist/frameworks/react/project/base/package.json +17 -20
  32. package/dist/frameworks/react/project/base/src/components/Header.tsx.ejs +0 -7
  33. package/dist/frameworks/react/project/base/src/routes/about.tsx.ejs +3 -8
  34. package/dist/frameworks/react/project/base/src/routes/index.tsx.ejs +7 -7
  35. package/dist/frameworks/react/project/base/src/styles.css.ejs +0 -18
  36. package/dist/frameworks/react/project/base/tsconfig.json.ejs +0 -1
  37. package/dist/frameworks/react/project/base/vite.config.ts.ejs +0 -2
  38. package/dist/frameworks/react/toolchains/biome/package.json +1 -1
  39. package/dist/frameworks/react/toolchains/eslint/package.json +2 -2
  40. package/dist/frameworks/solid/add-ons/better-auth/package.json +1 -1
  41. package/dist/frameworks/solid/add-ons/convex/package.json +3 -3
  42. package/dist/frameworks/solid/add-ons/form/package.json +1 -1
  43. package/dist/frameworks/solid/add-ons/sentry/package.json +1 -1
  44. package/dist/frameworks/solid/add-ons/store/package.json +2 -2
  45. package/dist/frameworks/solid/add-ons/strapi/package.json +2 -2
  46. package/dist/frameworks/solid/add-ons/t3env/package.json +2 -2
  47. package/dist/frameworks/solid/add-ons/tanstack-query/package.json +2 -2
  48. package/dist/frameworks/solid/examples/tanchat/assets/ai-streaming-server/package.json +3 -3
  49. package/dist/frameworks/solid/examples/tanchat/package.json +2 -2
  50. package/dist/frameworks/solid/hosts/cloudflare/package.json.ejs +2 -2
  51. package/dist/frameworks/solid/hosts/netlify/package.json +1 -1
  52. package/dist/frameworks/solid/project/base/package.json +11 -10
  53. package/dist/frameworks/solid/project/base/src/components/Header.tsx.ejs +51 -138
  54. package/dist/frameworks/solid/project/base/src/routes/__root.tsx.ejs +2 -5
  55. package/dist/frameworks/solid/project/base/src/routes/about.tsx.ejs +22 -0
  56. package/dist/frameworks/solid/project/base/src/routes/index.tsx.ejs +59 -94
  57. package/dist/frameworks/solid/project/base/src/styles.css.ejs +187 -7
  58. package/dist/frameworks/solid/project/base/vite.config.ts.ejs +1 -2
  59. package/dist/frameworks/solid/toolchains/biome/package.json +1 -1
  60. package/dist/frameworks/solid/toolchains/eslint/package.json +2 -2
  61. package/dist/npm-resolver.js +56 -0
  62. package/dist/package-json.js +25 -3
  63. package/dist/types/npm-resolver.d.ts +18 -0
  64. package/dist/types/package-json.d.ts +1 -5
  65. package/package.json +1 -1
  66. package/src/create-app.ts +3 -1
  67. package/src/frameworks/react/add-ons/ai/package.json +3 -3
  68. package/src/frameworks/react/add-ons/apollo-client/package.json +2 -2
  69. package/src/frameworks/react/add-ons/better-auth/package.json +1 -1
  70. package/src/frameworks/react/add-ons/clerk/package.json +1 -1
  71. package/src/frameworks/react/add-ons/convex/package.json +2 -2
  72. package/src/frameworks/react/add-ons/db/package.json +3 -3
  73. package/src/frameworks/react/add-ons/drizzle/package.json.ejs +5 -5
  74. package/src/frameworks/react/add-ons/form/package.json +2 -2
  75. package/src/frameworks/react/add-ons/mcp/package.json +2 -2
  76. package/src/frameworks/react/add-ons/neon/package.json +2 -2
  77. package/src/frameworks/react/add-ons/oRPC/package.json +7 -7
  78. package/src/frameworks/react/add-ons/paraglide/package.json +1 -1
  79. package/src/frameworks/react/add-ons/posthog/package.json +2 -2
  80. package/src/frameworks/react/add-ons/prisma/package.json.ejs +7 -7
  81. package/src/frameworks/react/add-ons/sentry/package.json +1 -1
  82. package/src/frameworks/react/add-ons/shadcn/package.json +1 -1
  83. package/src/frameworks/react/add-ons/store/package.json +3 -3
  84. package/src/frameworks/react/add-ons/storybook/package.json +2 -2
  85. package/src/frameworks/react/add-ons/strapi/package.json +2 -2
  86. package/src/frameworks/react/add-ons/t3env/package.json +2 -2
  87. package/src/frameworks/react/add-ons/tRPC/package.json +4 -4
  88. package/src/frameworks/react/add-ons/table/package.json +3 -3
  89. package/src/frameworks/react/add-ons/tanstack-query/package.json +2 -2
  90. package/src/frameworks/react/add-ons/workos/package.json +2 -2
  91. package/src/frameworks/react/examples/events/package.json +3 -3
  92. package/src/frameworks/react/examples/resume/package.json +2 -2
  93. package/src/frameworks/react/hosts/cloudflare/package.json.ejs +2 -2
  94. package/src/frameworks/react/hosts/netlify/package.json +1 -1
  95. package/src/frameworks/react/project/base/package.json +17 -20
  96. package/src/frameworks/react/project/base/src/components/Header.tsx.ejs +0 -7
  97. package/src/frameworks/react/project/base/src/routes/about.tsx.ejs +3 -8
  98. package/src/frameworks/react/project/base/src/routes/index.tsx.ejs +7 -7
  99. package/src/frameworks/react/project/base/src/styles.css.ejs +0 -18
  100. package/src/frameworks/react/project/base/tsconfig.json.ejs +0 -1
  101. package/src/frameworks/react/project/base/vite.config.ts.ejs +0 -2
  102. package/src/frameworks/react/toolchains/biome/package.json +1 -1
  103. package/src/frameworks/react/toolchains/eslint/package.json +2 -2
  104. package/src/frameworks/solid/add-ons/better-auth/package.json +1 -1
  105. package/src/frameworks/solid/add-ons/convex/package.json +3 -3
  106. package/src/frameworks/solid/add-ons/form/package.json +1 -1
  107. package/src/frameworks/solid/add-ons/sentry/package.json +1 -1
  108. package/src/frameworks/solid/add-ons/store/package.json +2 -2
  109. package/src/frameworks/solid/add-ons/strapi/package.json +2 -2
  110. package/src/frameworks/solid/add-ons/t3env/package.json +2 -2
  111. package/src/frameworks/solid/add-ons/tanstack-query/package.json +2 -2
  112. package/src/frameworks/solid/examples/tanchat/assets/ai-streaming-server/package.json +3 -3
  113. package/src/frameworks/solid/examples/tanchat/package.json +2 -2
  114. package/src/frameworks/solid/hosts/cloudflare/package.json.ejs +2 -2
  115. package/src/frameworks/solid/hosts/netlify/package.json +1 -1
  116. package/src/frameworks/solid/project/base/package.json +11 -10
  117. package/src/frameworks/solid/project/base/src/components/Header.tsx.ejs +51 -138
  118. package/src/frameworks/solid/project/base/src/routes/__root.tsx.ejs +2 -5
  119. package/src/frameworks/solid/project/base/src/routes/about.tsx.ejs +22 -0
  120. package/src/frameworks/solid/project/base/src/routes/index.tsx.ejs +59 -94
  121. package/src/frameworks/solid/project/base/src/styles.css.ejs +187 -7
  122. package/src/frameworks/solid/project/base/vite.config.ts.ejs +1 -2
  123. package/src/frameworks/solid/toolchains/biome/package.json +1 -1
  124. package/src/frameworks/solid/toolchains/eslint/package.json +2 -2
  125. package/src/npm-resolver.ts +65 -0
  126. package/src/package-json.ts +34 -3
  127. package/tests/package-json.test.ts +32 -0
  128. package/dist/frameworks/react/project/base/content/blog/fifth-post.mdx.ejs +0 -54
  129. package/dist/frameworks/react/project/base/content/blog/first-post.md.ejs +0 -47
  130. package/dist/frameworks/react/project/base/content/blog/fourth-post.md.ejs +0 -42
  131. package/dist/frameworks/react/project/base/content/blog/second-post.mdx.ejs +0 -46
  132. package/dist/frameworks/react/project/base/content/blog/third-post.md.ejs +0 -49
  133. package/dist/frameworks/react/project/base/content-collections.ts.ejs +0 -37
  134. package/dist/frameworks/react/project/base/public/images/lagoon-1.svg +0 -13
  135. package/dist/frameworks/react/project/base/public/images/lagoon-2.svg +0 -12
  136. package/dist/frameworks/react/project/base/public/images/lagoon-3.svg +0 -12
  137. package/dist/frameworks/react/project/base/public/images/lagoon-4.svg +0 -12
  138. package/dist/frameworks/react/project/base/public/images/lagoon-5.svg +0 -12
  139. package/dist/frameworks/react/project/base/public/images/lagoon-about.svg +0 -14
  140. package/dist/frameworks/react/project/base/public/tanstack-circle-logo.png +0 -0
  141. package/dist/frameworks/react/project/base/public/tanstack-word-logo-white.svg +0 -1
  142. package/dist/frameworks/react/project/base/src/components/MdxCallout.tsx.ejs +0 -16
  143. package/dist/frameworks/react/project/base/src/components/MdxMetrics.tsx.ejs +0 -23
  144. package/dist/frameworks/react/project/base/src/lib/site.ts.ejs +0 -4
  145. package/dist/frameworks/react/project/base/src/routes/blog.$slug.tsx.ejs +0 -71
  146. package/dist/frameworks/react/project/base/src/routes/blog.index.tsx.ejs +0 -93
  147. package/dist/frameworks/react/project/base/src/routes/rss[.]xml.ts.ejs +0 -35
  148. package/src/frameworks/react/project/base/content/blog/fifth-post.mdx.ejs +0 -54
  149. package/src/frameworks/react/project/base/content/blog/first-post.md.ejs +0 -47
  150. package/src/frameworks/react/project/base/content/blog/fourth-post.md.ejs +0 -42
  151. package/src/frameworks/react/project/base/content/blog/second-post.mdx.ejs +0 -46
  152. package/src/frameworks/react/project/base/content/blog/third-post.md.ejs +0 -49
  153. package/src/frameworks/react/project/base/content-collections.ts.ejs +0 -37
  154. package/src/frameworks/react/project/base/public/images/lagoon-1.svg +0 -13
  155. package/src/frameworks/react/project/base/public/images/lagoon-2.svg +0 -12
  156. package/src/frameworks/react/project/base/public/images/lagoon-3.svg +0 -12
  157. package/src/frameworks/react/project/base/public/images/lagoon-4.svg +0 -12
  158. package/src/frameworks/react/project/base/public/images/lagoon-5.svg +0 -12
  159. package/src/frameworks/react/project/base/public/images/lagoon-about.svg +0 -14
  160. package/src/frameworks/react/project/base/public/tanstack-circle-logo.png +0 -0
  161. package/src/frameworks/react/project/base/public/tanstack-word-logo-white.svg +0 -1
  162. package/src/frameworks/react/project/base/src/components/MdxCallout.tsx.ejs +0 -16
  163. package/src/frameworks/react/project/base/src/components/MdxMetrics.tsx.ejs +0 -23
  164. package/src/frameworks/react/project/base/src/lib/site.ts.ejs +0 -4
  165. package/src/frameworks/react/project/base/src/routes/blog.$slug.tsx.ejs +0 -71
  166. package/src/frameworks/react/project/base/src/routes/blog.index.tsx.ejs +0 -93
  167. package/src/frameworks/react/project/base/src/routes/rss[.]xml.ts.ejs +0 -35
@@ -1,155 +1,68 @@
1
- <% if (addOns.length === 0 && integrations.length === 0 && routes.length === 0) { ignoreFile() } %>import { Link } from '@tanstack/solid-router'
1
+ import { Link } from '@tanstack/solid-router'
2
2
  <% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
3
- import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
4
- <% } %><%
5
- const icons = new Set([
6
- "Menu",
7
- "X",
8
- "Home",
9
- "Globe",
10
- ])
3
+ import <%= integration.jsName %> from '<%= relativePath(integration.path) %>'
4
+ <% } %>
11
5
 
12
- for(const addOn of addOns) {
13
- for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) {
14
- icons.add( route.icon || "Globe");
15
- if (route.children?.length) {
16
- icons.add("ChevronDown")
17
- icons.add("ChevronRight")
6
+ <%
7
+ const demoRoutes = [];
8
+ for (const addOn of addOns) {
9
+ for (const route of (addOn?.routes || []).filter((r) => r.url && r.name)) {
10
+ demoRoutes.push({ url: route.url, name: route.name });
11
+ for (const child of route.children || []) {
12
+ if (child?.url && child?.name) {
13
+ demoRoutes.push({ url: child.url, name: child.name });
14
+ }
18
15
  }
19
16
  }
20
17
  }
18
+ const userHeaders = integrations.filter((i) => i.type === 'header-user');
21
19
  %>
22
- import { createSignal } from 'solid-js';
23
- import {
24
- <%= Array.from(icons).sort().join(", ") %>
25
- } from "lucide-solid";
26
20
 
27
21
  export default function Header() {
28
- <%
29
- const hasNestedRouteGroups = addOns.some(a => a.routes?.some(r => r.children?.length));
30
- const userHeaders = integrations.filter(i => i.type === 'header-user');
31
- %>
32
- const [isOpen, setIsOpen] = createSignal(false);
33
- <% if (hasNestedRouteGroups) { %>
34
- const [groupedExpanded, setGroupedExpanded] = createSignal<Record<string, boolean>>({});
35
- <% } %>
36
-
37
22
  return (
38
- <>
39
- <header class="p-4 flex items-center bg-gray-800 text-white shadow-lg">
40
- <button
41
- onClick={() => setIsOpen(true)}
42
- class="p-2 hover:bg-gray-700 rounded-lg transition-colors"
43
- aria-label="Open menu"
44
- >
45
- <Menu size={24} />
46
- </button>
47
- <h1 class="ml-4 text-xl font-semibold">
48
- <Link to="/">
49
- <img
50
- src="/logo192.png"
51
- alt="TanStack Logo"
52
- class="h-10"
53
- />
23
+ <header class="site-header px-4">
24
+ <nav class="page-wrap nav-shell">
25
+ <h2 class="m-0 flex-shrink-0 text-base font-semibold tracking-tight">
26
+ <Link to="/" class="brand-pill">
27
+ <span class="brand-dot" />
28
+ TanStack Start
54
29
  </Link>
55
- </h1>
56
- </header>
30
+ </h2>
57
31
 
58
- <aside
59
- class={`fixed top-0 left-0 h-full w-80 bg-gray-900 text-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${
60
- isOpen() ? "translate-x-0" : "-translate-x-full"
61
- }`}
62
- >
63
- <div class="flex items-center justify-between p-4 border-b border-gray-700">
64
- <h2 class="text-xl font-bold">Navigation</h2>
65
- <button
66
- onClick={() => setIsOpen(false)}
67
- class="p-2 hover:bg-gray-800 rounded-lg transition-colors"
68
- aria-label="Close menu"
69
- >
70
- <X size={24} />
71
- </button>
32
+ <div class="ml-auto flex items-center gap-2">
33
+ <% for (const integration of userHeaders) { %><<%= integration.jsName %> />
34
+ <% } %>
72
35
  </div>
73
36
 
74
- <nav class="flex-1 p-4 overflow-y-auto">
75
- <Link
76
- to="/"
77
- onClick={() => setIsOpen(false)}
78
- class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
79
- activeProps={{
80
- class:
81
- "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
82
- }}
83
- >
84
- <Home size={20} />
85
- <span class="font-medium">Home</span>
37
+ <div class="order-3 flex w-full flex-wrap items-center gap-x-4 gap-y-1 pb-1 text-sm font-semibold sm:order-2 sm:w-auto sm:flex-nowrap sm:pb-0">
38
+ <Link to="/" class="nav-link" activeProps={{ class: 'nav-link is-active' }}>
39
+ Home
86
40
  </Link>
87
-
88
- {/* Demo Links Start */}
89
- <% for(const addOn of addOns) {
90
- for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) {
91
- if (route.children) { %>
92
- <div class="flex flex-row justify-between">
93
- <Link to="<%= route.url %>"
94
- onClick={() => setIsOpen(false)}
95
- class="flex-1 flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
96
- activeProps={{
97
- class:
98
- "flex-1 flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
99
- }}
100
- >
101
- <<%= route.icon || "Globe" %> size={20} />
102
- <span class="font-medium"><%= route.name %></span>
103
- </Link>
104
- <button
105
- class="p-2 hover:bg-gray-800 rounded-lg transition-colors"
106
- onClick={() => setGroupedExpanded(prev => ({ ...prev, <%= route.jsName %>: !prev.<%= route.jsName %> }))}>
107
- {groupedExpanded().<%= route.jsName %> ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
108
- </button>
109
- </div>
110
- {groupedExpanded().<%= route.jsName %> && (
111
- <div class="flex flex-col ml-4">
112
- <% for(const child of route.children) { %>
113
- <Link
114
- to="<%= child.url %>"
115
- onClick={() => setIsOpen(false)}
116
- class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
117
- activeProps={{
118
- class:
119
- "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
120
- }}
121
- >
122
- <<%= child.icon || "Globe" %> size={20} />
123
- <span class="font-medium"><%= child.name %></span>
124
- </Link>
125
- <% } %>
126
- </div>
127
- )}
128
- <% } else { %>
129
- <Link
130
- to="<%= route.url %>"
131
- onClick={() => setIsOpen(false)}
132
- class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
133
- activeProps={{
134
- class:
135
- "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
136
- }}
41
+ <Link to="/about" class="nav-link" activeProps={{ class: 'nav-link is-active' }}>
42
+ About
43
+ </Link>
44
+ <a
45
+ href="https://tanstack.com/start/latest/docs/framework/solid/overview"
46
+ target="_blank"
47
+ rel="noreferrer"
48
+ class="nav-link"
49
+ >
50
+ Docs
51
+ </a>
52
+ <% if (demoRoutes.length > 0) { %><details class="relative w-full sm:w-auto">
53
+ <summary class="nav-link list-none cursor-pointer">Demos</summary>
54
+ <div class="mt-2 min-w-56 rounded-xl border border-[var(--line)] bg-[var(--header-bg)] p-2 shadow-lg sm:absolute sm:right-0">
55
+ <% for (const route of demoRoutes) { %><a
56
+ href="<%= route.url %>"
57
+ class="block rounded-lg px-3 py-2 text-sm text-[var(--sea-ink-soft)] no-underline transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
137
58
  >
138
- <<%= route.icon || "Globe" %> size={20} />
139
- <span class="font-medium"><%= route.name %></span>
140
- </Link>
141
- <% } } } %>
142
- {/* Demo Links End */}
143
- </nav>
144
-
145
- <% if (userHeaders.length > 0) { %>
146
- <div class="p-4 border-t border-gray-700 bg-gray-800 flex flex-col gap-2">
147
- <% for(const integration of userHeaders) { %>
148
- <<%= integration.jsName %> />
149
- <% } %>
59
+ <%= route.name %>
60
+ </a>
61
+ <% } %>
62
+ </div>
63
+ </details><% } %>
150
64
  </div>
151
- <% } %>
152
- </aside>
153
- </>
154
- );
65
+ </nav>
66
+ </header>
67
+ )
155
68
  }
@@ -27,8 +27,7 @@ import "@fontsource/inter/400.css"
27
27
  import { HydrationScript } from 'solid-js/web'
28
28
  import { Suspense } from 'solid-js'
29
29
 
30
- <% if (addOns.length || integrations.length || routes.length) { %>import Header from '../components/Header'
31
- <% } %>
30
+ import Header from '../components/Header'
32
31
  <% for(const addOn of addOns) {
33
32
  for(const init of addOn.main?.initialize || []) { %>
34
33
  <%- init %>
@@ -52,9 +51,7 @@ function RootComponent() {
52
51
  <body>
53
52
  <HeadContent />
54
53
  <Suspense>
55
- <% if (addOns.length || integrations.length || routes.length) { %>
56
- <Header />
57
- <% } %>
54
+ <Header />
58
55
  <Outlet />
59
56
  <TanStackRouterDevtools />
60
57
  <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
@@ -0,0 +1,22 @@
1
+ import { createFileRoute } from '@tanstack/solid-router'
2
+
3
+ export const Route = createFileRoute('/about')({
4
+ component: About,
5
+ })
6
+
7
+ function About() {
8
+ return (
9
+ <main class="page-wrap px-4 py-12">
10
+ <section class="island-shell rounded-2xl p-6 sm:p-8">
11
+ <p class="island-kicker mb-2">About</p>
12
+ <h1 class="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
13
+ A small starter with room to grow.
14
+ </h1>
15
+ <p class="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
16
+ TanStack Start gives you type-safe routing, server functions, and modern SSR defaults.
17
+ Use this as a clean foundation, then layer in your own routes, styling, and add-ons.
18
+ </p>
19
+ </section>
20
+ </main>
21
+ )
22
+ }
@@ -1,103 +1,68 @@
1
- import { createFileRoute } from "@tanstack/solid-router";
2
- import { For } from "solid-js"
3
- import {
4
- Zap, Server, Route as RouteIcon, Shield, Waves, Sparkles,
5
- } from "lucide-solid";
1
+ import { createFileRoute } from '@tanstack/solid-router'
6
2
 
7
- export const Route = createFileRoute("/")({ component: App });
3
+ export const Route = createFileRoute('/')({ component: App })
8
4
 
9
5
  function App() {
10
- const features = [
11
- {
12
- icon: <Zap class="w-12 h-12 text-cyan-400" />,
13
- title: "Powerful Server Functions",
14
- description: "Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.",
15
- },
16
- {
17
- icon: <Server class="w-12 h-12 text-cyan-400" />,
18
- title: "Flexible Server Side Rendering",
19
- description: "Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.",
20
- },
21
- {
22
- icon: <RouteIcon class="w-12 h-12 text-cyan-400" />,
23
- title: "API Routes",
24
- description: "Build type-safe API endpoints alongside your application. No separate backend needed.",
25
- },
26
- {
27
- icon: <Shield class="w-12 h-12 text-cyan-400" />,
28
- title: "Strongly Typed Everything",
29
- description: "End-to-end type safety from server to client. Catch errors before they reach production.",
30
- },
31
- {
32
- icon: <Waves class="w-12 h-12 text-cyan-400" />,
33
- title: "Full Streaming Support",
34
- description: "Stream data from server to client progressively. Perfect for AI applications and real-time updates.",
35
- },
36
- {
37
- icon: <Sparkles class="w-12 h-12 text-cyan-400" />,
38
- title: "Next Generation Ready",
39
- description: "Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.",
40
- },
41
- ];
42
-
43
6
  return (
44
- <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
45
- <section class="relative py-20 px-6 text-center overflow-hidden">
46
- <div class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"></div>
47
- <div class="relative max-w-5xl mx-auto">
48
- <div class="flex items-center justify-center gap-6 mb-6">
49
- <img
50
- src="/logo192.png"
51
- alt="TanStack Logo"
52
- class="w-24 h-24 md:w-32 md:h-32"
53
- />
54
- <h1 class="text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]">
55
- <span class="text-gray-300">TANSTACK</span>{" "}
56
- <span class="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
57
- START
58
- </span>
59
- </h1>
60
- </div>
61
- <p class="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
62
- The framework for next generation AI applications
63
- </p>
64
- <p class="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
65
- Full-stack framework powered by TanStack Router for React and Solid.
66
- Build modern applications with server functions, streaming, and type
67
- safety.
68
- </p>
69
- <div class="flex flex-col items-center gap-4">
70
- <a
71
- href="https://tanstack.com/start"
72
- target="_blank"
73
- rel="noopener noreferrer"
74
- class="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
75
- >
76
- Documentation
77
- </a>
78
- <p class="text-gray-400 text-sm mt-2">
79
- Begin your TanStack Start journey by editing{" "}
80
- <code class="px-2 py-1 bg-slate-700 rounded text-cyan-400">
81
- /src/routes/index.tsx
82
- </code>
83
- </p>
84
- </div>
7
+ <main class="page-wrap px-4 pb-8 pt-14">
8
+ <section class="island-shell rise-in relative overflow-hidden rounded-[2rem] px-6 py-10 sm:px-10 sm:py-14">
9
+ <div class="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />
10
+ <div class="pointer-events-none absolute -bottom-20 -right-20 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.18),transparent_66%)]" />
11
+ <p class="island-kicker mb-3">TanStack Start Base Template</p>
12
+ <h1 class="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">
13
+ Start simple, ship quickly.
14
+ </h1>
15
+ <p class="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">
16
+ This base starter intentionally keeps things light: two routes, clean structure,
17
+ and the essentials you need to build from scratch.
18
+ </p>
19
+ <div class="flex flex-wrap gap-3">
20
+ <a
21
+ href="/about"
22
+ class="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-[var(--lagoon-deep)] no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"
23
+ >
24
+ About This Starter
25
+ </a>
26
+ <a
27
+ href="https://tanstack.com/router"
28
+ target="_blank"
29
+ rel="noopener noreferrer"
30
+ class="rounded-full border border-[rgba(23,58,64,0.2)] bg-white/50 px-5 py-2.5 text-sm font-semibold text-[var(--sea-ink)] no-underline transition hover:-translate-y-0.5 hover:border-[rgba(23,58,64,0.35)]"
31
+ >
32
+ Router Guide
33
+ </a>
85
34
  </div>
86
35
  </section>
87
36
 
88
- <section class="py-16 px-6 max-w-7xl mx-auto">
89
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
90
- <For each={features}>
91
- {(feature) => (
92
- <div class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10">
93
- <div class="mb-4">{feature.icon}</div>
94
- <h3 class="text-xl font-semibold text-white mb-3">{feature.title}</h3>
95
- <p class="text-gray-400 leading-relaxed">{feature.description}</p>
96
- </div>
97
- )}
98
- </For>
99
- </div>
37
+ <section class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
38
+ {[
39
+ ['Type-Safe Routing', 'Routes and links stay in sync across every page.'],
40
+ ['Server Functions', 'Call server code from your UI without creating API boilerplate.'],
41
+ ['Streaming by Default', 'Ship progressively rendered responses for faster experiences.'],
42
+ ['Tailwind Native', 'Design quickly with utility-first styling and reusable tokens.'],
43
+ ].map(([title, desc], index) => (
44
+ <article
45
+ class="island-shell feature-card rise-in rounded-2xl p-5"
46
+ style={{ 'animation-delay': `${index * 90 + 80}ms` }}
47
+ >
48
+ <h2 class="mb-2 text-base font-semibold text-[var(--sea-ink)]">{title}</h2>
49
+ <p class="m-0 text-sm text-[var(--sea-ink-soft)]">{desc}</p>
50
+ </article>
51
+ ))}
52
+ </section>
53
+
54
+ <section class="island-shell mt-8 rounded-2xl p-6">
55
+ <p class="island-kicker mb-2">Quick Start</p>
56
+ <ul class="m-0 list-disc space-y-2 pl-5 text-sm text-[var(--sea-ink-soft)]">
57
+ <li>Edit <code>src/routes/index.tsx</code> to customize the home page.</li>
58
+ <li>
59
+ Update <code>src/components/Header.tsx</code> for navigation and product links.
60
+ </li>
61
+ <li>
62
+ Add routes in <code>src/routes</code> and tweak visual tokens in <code>src/styles.css</code>.
63
+ </li>
64
+ </ul>
100
65
  </section>
101
- </div>
102
- );
66
+ </main>
67
+ )
103
68
  }
@@ -1,15 +1,195 @@
1
- @import "tailwindcss";
1
+ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');
2
+ @import 'tailwindcss';
3
+
4
+ :root {
5
+ --sea-ink: #173a40;
6
+ --sea-ink-soft: #416166;
7
+ --lagoon: #4fb8b2;
8
+ --lagoon-deep: #328f97;
9
+ --palm: #2f6a4a;
10
+ --sand: #e7f0e8;
11
+ --foam: #f3faf5;
12
+ --surface: rgba(255, 255, 255, 0.74);
13
+ --surface-strong: rgba(255, 255, 255, 0.9);
14
+ --line: rgba(23, 58, 64, 0.14);
15
+ --inset-glint: rgba(255, 255, 255, 0.82);
16
+ --kicker: rgba(47, 106, 74, 0.9);
17
+ --bg-base: #e7f3ec;
18
+ --header-bg: rgba(251, 255, 248, 0.84);
19
+ --chip-bg: rgba(255, 255, 255, 0.8);
20
+ --chip-line: rgba(47, 106, 74, 0.18);
21
+ --link-bg-hover: rgba(255, 255, 255, 0.9);
22
+ --hero-a: rgba(79, 184, 178, 0.36);
23
+ --hero-b: rgba(47, 106, 74, 0.2);
24
+ }
25
+
26
+ * {
27
+ box-sizing: border-box;
28
+ }
29
+
30
+ html,
31
+ body,
32
+ #app {
33
+ min-height: 100%;
34
+ }
2
35
 
3
36
  body {
4
- @apply m-0;
5
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
6
- "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
7
- sans-serif;
37
+ margin: 0;
38
+ color: var(--sea-ink);
39
+ font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
40
+ background-color: var(--bg-base);
41
+ background:
42
+ radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%),
43
+ radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%),
44
+ radial-gradient(720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68%),
45
+ linear-gradient(
46
+ 180deg,
47
+ color-mix(in oklab, var(--sand) 68%, white) 0%,
48
+ var(--foam) 44%,
49
+ var(--bg-base) 100%
50
+ );
51
+ overflow-x: hidden;
8
52
  -webkit-font-smoothing: antialiased;
9
53
  -moz-osx-font-smoothing: grayscale;
10
54
  }
11
55
 
56
+ a {
57
+ color: var(--lagoon-deep);
58
+ text-decoration-color: rgba(50, 143, 151, 0.4);
59
+ text-decoration-thickness: 1px;
60
+ text-underline-offset: 2px;
61
+ }
62
+
63
+ a:hover {
64
+ color: #246f76;
65
+ }
66
+
12
67
  code {
13
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
14
- monospace;
68
+ font-size: 0.9em;
69
+ border: 1px solid var(--line);
70
+ background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);
71
+ border-radius: 7px;
72
+ padding: 2px 7px;
73
+ }
74
+
75
+ .page-wrap {
76
+ width: min(1080px, calc(100% - 2rem));
77
+ margin-inline: auto;
78
+ }
79
+
80
+ .display-title {
81
+ font-family: 'Fraunces', Georgia, serif;
82
+ }
83
+
84
+ .island-shell {
85
+ border: 1px solid var(--line);
86
+ background: linear-gradient(165deg, var(--surface-strong), var(--surface));
87
+ box-shadow:
88
+ 0 1px 0 var(--inset-glint) inset,
89
+ 0 22px 44px rgba(30, 90, 72, 0.1),
90
+ 0 6px 18px rgba(23, 58, 64, 0.08);
91
+ backdrop-filter: blur(4px);
92
+ }
93
+
94
+ .feature-card {
95
+ background: linear-gradient(
96
+ 165deg,
97
+ color-mix(in oklab, var(--surface-strong) 93%, white 7%),
98
+ var(--surface)
99
+ );
100
+ box-shadow:
101
+ 0 1px 0 var(--inset-glint) inset,
102
+ 0 18px 34px rgba(30, 90, 72, 0.1),
103
+ 0 4px 14px rgba(23, 58, 64, 0.06);
104
+ }
105
+
106
+ .site-header {
107
+ position: sticky;
108
+ top: 0;
109
+ z-index: 50;
110
+ border-bottom: 1px solid var(--line);
111
+ background: var(--header-bg);
112
+ backdrop-filter: blur(10px);
113
+ }
114
+
115
+ .nav-shell {
116
+ display: flex;
117
+ flex-wrap: wrap;
118
+ align-items: center;
119
+ gap: 0.5rem 0.75rem;
120
+ padding: 0.75rem 0;
121
+ }
122
+
123
+ .brand-pill {
124
+ display: inline-flex;
125
+ align-items: center;
126
+ gap: 0.5rem;
127
+ border-radius: 999px;
128
+ border: 1px solid var(--chip-line);
129
+ background: var(--chip-bg);
130
+ padding: 0.5rem 0.875rem;
131
+ color: var(--sea-ink);
132
+ text-decoration: none;
133
+ box-shadow: 0 8px 24px rgba(30, 90, 72, 0.08);
134
+ }
135
+
136
+ .brand-dot {
137
+ height: 0.5rem;
138
+ width: 0.5rem;
139
+ border-radius: 999px;
140
+ background: linear-gradient(90deg, #56c6be, #7ed3bf);
141
+ }
142
+
143
+ .island-kicker {
144
+ letter-spacing: 0.16em;
145
+ text-transform: uppercase;
146
+ font-weight: 700;
147
+ font-size: 0.69rem;
148
+ color: var(--kicker);
149
+ }
150
+
151
+ .nav-link {
152
+ position: relative;
153
+ display: inline-flex;
154
+ align-items: center;
155
+ color: var(--sea-ink-soft);
156
+ text-decoration: none;
157
+ }
158
+
159
+ .nav-link::after {
160
+ content: '';
161
+ position: absolute;
162
+ left: 0;
163
+ bottom: -6px;
164
+ width: 100%;
165
+ height: 2px;
166
+ transform: scaleX(0);
167
+ transform-origin: left;
168
+ background: linear-gradient(90deg, var(--lagoon), #7ed3bf);
169
+ transition: transform 170ms ease;
170
+ }
171
+
172
+ .nav-link:hover,
173
+ .nav-link.is-active {
174
+ color: var(--sea-ink);
175
+ }
176
+
177
+ .nav-link:hover::after,
178
+ .nav-link.is-active::after {
179
+ transform: scaleX(1);
180
+ }
181
+
182
+ .rise-in {
183
+ animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
184
+ }
185
+
186
+ @keyframes rise-in {
187
+ from {
188
+ opacity: 0;
189
+ transform: translateY(12px);
190
+ }
191
+ to {
192
+ opacity: 1;
193
+ transform: translateY(0);
194
+ }
15
195
  }
@@ -10,10 +10,9 @@ import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
10
10
  import solidPlugin from 'vite-plugin-solid';
11
11
  <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
12
12
  <% } %>
13
- import lucidePreprocess from "vite-plugin-lucide-preprocess";
14
13
 
15
14
  export default defineConfig({
16
- plugins: [lucidePreprocess(), devtools(), <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
15
+ plugins: [devtools(), <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
17
16
  // this is the plugin that enables path aliases
18
17
  viteTsConfigPaths({
19
18
  projects: ['./tsconfig.json'],
@@ -5,6 +5,6 @@
5
5
  "check": "biome check"
6
6
  },
7
7
  "devDependencies": {
8
- "@biomejs/biome": "2.2.4"
8
+ "@biomejs/biome": "2.4.5"
9
9
  }
10
10
  }
@@ -5,7 +5,7 @@
5
5
  "check": "prettier --write . && eslint --fix"
6
6
  },
7
7
  "devDependencies": {
8
- "@tanstack/eslint-config": "^0.3.2",
9
- "prettier": "^3.5.3"
8
+ "@tanstack/eslint-config": "latest",
9
+ "prettier": "^3.8.1"
10
10
  }
11
11
  }