+
+ About
+
+ A small starter with room to grow.
+
+
+ TanStack Start gives you type-safe routing, server functions, and modern SSR defaults. Use
+ this as a clean foundation, then layer in your own routes, styling, and add-ons.
+
+
+
+ );
+}
diff --git a/rsbuild/tanstack-start-solid/src/routes/index.tsx b/rsbuild/tanstack-start-solid/src/routes/index.tsx
new file mode 100644
index 00000000..a56a51d2
--- /dev/null
+++ b/rsbuild/tanstack-start-solid/src/routes/index.tsx
@@ -0,0 +1,71 @@
+import { createFileRoute } from '@tanstack/solid-router';
+
+export const Route = createFileRoute('/')({ component: App });
+
+function App() {
+ return (
+
+
+
+
+ TanStack Start Base Template
+
+ Start simple, ship quickly.
+
+
+ This base starter intentionally keeps things light: two routes, clean structure, and the
+ essentials you need to build from scratch.
+
+
+
+
+
+ {[
+ ['Type-Safe Routing', 'Routes and links stay in sync across every page.'],
+ ['Server Functions', 'Call server code from your UI without creating API boilerplate.'],
+ ['Streaming by Default', 'Ship progressively rendered responses for faster experiences.'],
+ ['Tailwind Native', 'Design quickly with utility-first styling and reusable tokens.'],
+ ].map(([title, desc], index) => (
+
+ {title}
+ {desc}
+
+ ))}
+
+
+
+ Quick Start
+
+ -
+ Edit
src/routes/index.tsx to customize the home page.
+
+ -
+ Update
src/components/Header.tsx for navigation and product links.
+
+ -
+ Add routes in
src/routes and tweak visual tokens in{' '}
+ src/styles.css.
+
+
+
+
+ );
+}
diff --git a/rsbuild/tanstack-start-solid/src/styles.css b/rsbuild/tanstack-start-solid/src/styles.css
new file mode 100644
index 00000000..a1952e4a
--- /dev/null
+++ b/rsbuild/tanstack-start-solid/src/styles.css
@@ -0,0 +1,195 @@
+@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');
+@import 'tailwindcss';
+
+:root {
+ --sea-ink: #173a40;
+ --sea-ink-soft: #416166;
+ --lagoon: #4fb8b2;
+ --lagoon-deep: #328f97;
+ --palm: #2f6a4a;
+ --sand: #e7f0e8;
+ --foam: #f3faf5;
+ --surface: rgba(255, 255, 255, 0.74);
+ --surface-strong: rgba(255, 255, 255, 0.9);
+ --line: rgba(23, 58, 64, 0.14);
+ --inset-glint: rgba(255, 255, 255, 0.82);
+ --kicker: rgba(47, 106, 74, 0.9);
+ --bg-base: #e7f3ec;
+ --header-bg: rgba(251, 255, 248, 0.84);
+ --chip-bg: rgba(255, 255, 255, 0.8);
+ --chip-line: rgba(47, 106, 74, 0.18);
+ --link-bg-hover: rgba(255, 255, 255, 0.9);
+ --hero-a: rgba(79, 184, 178, 0.36);
+ --hero-b: rgba(47, 106, 74, 0.2);
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+ min-height: 100%;
+}
+
+body {
+ margin: 0;
+ color: var(--sea-ink);
+ font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
+ background-color: var(--bg-base);
+ background:
+ radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%),
+ radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%),
+ radial-gradient(720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68%),
+ linear-gradient(
+ 180deg,
+ color-mix(in oklab, var(--sand) 68%, white) 0%,
+ var(--foam) 44%,
+ var(--bg-base) 100%
+ );
+ overflow-x: hidden;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ color: var(--lagoon-deep);
+ text-decoration-color: rgba(50, 143, 151, 0.4);
+ text-decoration-thickness: 1px;
+ text-underline-offset: 2px;
+}
+
+a:hover {
+ color: #246f76;
+}
+
+code {
+ font-size: 0.9em;
+ border: 1px solid var(--line);
+ background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);
+ border-radius: 7px;
+ padding: 2px 7px;
+}
+
+.page-wrap {
+ width: min(1080px, calc(100% - 2rem));
+ margin-inline: auto;
+}
+
+.display-title {
+ font-family: 'Fraunces', Georgia, serif;
+}
+
+.island-shell {
+ border: 1px solid var(--line);
+ background: linear-gradient(165deg, var(--surface-strong), var(--surface));
+ box-shadow:
+ 0 1px 0 var(--inset-glint) inset,
+ 0 22px 44px rgba(30, 90, 72, 0.1),
+ 0 6px 18px rgba(23, 58, 64, 0.08);
+ backdrop-filter: blur(4px);
+}
+
+.feature-card {
+ background: linear-gradient(
+ 165deg,
+ color-mix(in oklab, var(--surface-strong) 93%, white 7%),
+ var(--surface)
+ );
+ box-shadow:
+ 0 1px 0 var(--inset-glint) inset,
+ 0 18px 34px rgba(30, 90, 72, 0.1),
+ 0 4px 14px rgba(23, 58, 64, 0.06);
+}
+
+.site-header {
+ position: sticky;
+ top: 0;
+ z-index: 50;
+ border-bottom: 1px solid var(--line);
+ background: var(--header-bg);
+ backdrop-filter: blur(10px);
+}
+
+.nav-shell {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.5rem 0.75rem;
+ padding: 0.75rem 0;
+}
+
+.brand-pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-radius: 999px;
+ border: 1px solid var(--chip-line);
+ background: var(--chip-bg);
+ padding: 0.5rem 0.875rem;
+ color: var(--sea-ink);
+ text-decoration: none;
+ box-shadow: 0 8px 24px rgba(30, 90, 72, 0.08);
+}
+
+.brand-dot {
+ height: 0.5rem;
+ width: 0.5rem;
+ border-radius: 999px;
+ background: linear-gradient(90deg, #56c6be, #7ed3bf);
+}
+
+.island-kicker {
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 0.69rem;
+ color: var(--kicker);
+}
+
+.nav-link {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ color: var(--sea-ink-soft);
+ text-decoration: none;
+}
+
+.nav-link::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: -6px;
+ width: 100%;
+ height: 2px;
+ transform: scaleX(0);
+ transform-origin: left;
+ background: linear-gradient(90deg, var(--lagoon), #7ed3bf);
+ transition: transform 170ms ease;
+}
+
+.nav-link:hover,
+.nav-link.is-active {
+ color: var(--sea-ink);
+}
+
+.nav-link:hover::after,
+.nav-link.is-active::after {
+ transform: scaleX(1);
+}
+
+.rise-in {
+ animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes rise-in {
+ from {
+ opacity: 0;
+ transform: translateY(12px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
diff --git a/rsbuild/tanstack-start-solid/tsconfig.json b/rsbuild/tanstack-start-solid/tsconfig.json
new file mode 100644
index 00000000..7e963097
--- /dev/null
+++ b/rsbuild/tanstack-start-solid/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "include": ["**/*.ts", "**/*.tsx"],
+ "compilerOptions": {
+ "target": "ES2022",
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js",
+ "module": "ESNext",
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "types": ["node", "@rsbuild/core/types"],
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "noEmit": true,
+
+ /* Linting */
+ "skipLibCheck": true,
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ }
+}
diff --git a/rsbuild/tanstack-start/tsconfig.json b/rsbuild/tanstack-start/tsconfig.json
index f7511c70..a17116f9 100644
--- a/rsbuild/tanstack-start/tsconfig.json
+++ b/rsbuild/tanstack-start/tsconfig.json
@@ -9,7 +9,7 @@
"@/*": ["./src/*"]
},
"lib": ["ES2022", "DOM", "DOM.Iterable"],
- "types": ["node"],
+ "types": ["node", "@rsbuild/core/types"],
/* Bundler mode */
"moduleResolution": "bundler",