@tanstack/create 0.61.5 → 0.62.0

package/dist/frameworks/react/project/base/content/blog/first-post.md.ejs

@@ -0,0 +1,47 @@
+---
+title: 'Neon Mango Protocol'
+description: 'A quick walkthrough of the starter foundations.'
+pubDate: 'Jul 08 2024'
+heroImage: '/images/lagoon-3.svg'
+---
+
+This starter ships with routes, SSR, and a calm visual system out of the box.
+
+Start by editing route files, then layer in add-ons as needed.
+
+## What you get on day one
+
+- Full-document SSR using TanStack Start
+- Type-safe file routing with generated route types
+- A reusable design token system for light and dark themes
+
+The goal is simple: let teams ship product pages and APIs without spending the
+first week wiring framework internals.
+
+### Suggested order of operations
+
+1. Make the home route feel like your product
+2. Add one feature route and one API route
+3. Introduce add-ons only after your core UX is clear
+
+> Keep the first commit boring. Reliable defaults beat clever setup code.
+
+## Baseline delivery checklist
+
+Before introducing custom infra, confirm these are green:
+
+- `pnpm dev` starts cleanly
+- one server route returns typed data
+- one API route validates input/output
+- one integration test exercises a full page render
+
+When these are in place, you can iterate quickly without losing confidence.
+
+### Example request flow
+
+1. Client navigation enters route loader
+2. Loader calls server function
+3. Server function reads data source and returns typed payload
+4. Route component renders immediately with stable shape
+
+That flow is simple, predictable, and easy to debug.

package/dist/frameworks/react/project/base/content/blog/fourth-post.md.ejs

@@ -0,0 +1,42 @@
+---
+title: 'Static Tide Almanac'
+description: 'Dial in layout polish and image rhythm across cards.'
+pubDate: 'Jul 29 2024'
+heroImage: '/images/lagoon-1.svg'
+---
+
+As your app grows, visual rhythm matters as much as feature scope.
+
+Use larger feature cards to call attention to primary content, then support with
+smaller cards for secondary updates.
+
+## Practical layout pattern
+
+Use one featured card followed by standard cards in a responsive grid:
+
+- `lg:col-span-2` for the featured story
+- regular span for supporting posts
+- consistent card media height below `lg`
+
+That gives you hierarchy without reinventing every breakpoint.
+
+### A quick spacing rule
+
+Pair spacing in steps of 4 (`p-4`, `p-8`, `gap-4`, `gap-8`) and only break that
+rule for hero sections.
+
+## Card hierarchy recipe
+
+For content-heavy indexes, this sequence works well:
+
+1. One featured card with expanded width
+2. Three to six standard cards for breadth
+3. Optional utility card for onboarding links
+
+Keep title sizes mostly consistent and let width + image treatment carry
+hierarchy. That avoids jarring jumps as breakpoints shift.
+
+### Avoiding layout drift
+
+If cards start to look uneven, check image heights first, then paragraph length.
+Consistency there usually fixes 80% of visual noise.

package/dist/frameworks/react/project/base/content/blog/second-post.mdx.ejs

@@ -0,0 +1,46 @@
+---
+title: 'Paper Lantern Cache'
+description: 'How to shape navigation and page structure.'
+pubDate: 'Jul 15 2024'
+heroImage: '/images/lagoon-4.svg'
+---
+
+Use file-based routes in `src/routes` to grow the app.
+
+Keep shared UI in `src/components` and tune visual tokens in `src/styles.css`.
+
+## Route design tips
+
+Treat routes like product domains, not technical buckets.
+
+- `routes/settings.*` for account surfaces
+- `routes/billing.*` for payment and plan logic
+- `routes/api.*` for server handlers that belong to the same domain
+
+When route trees map to business intent, onboarding gets faster and refactors
+hurt less.
+
+```tsx
+// src/routes/billing.index.tsx
+export const Route = createFileRoute('/billing/')({
+  component: BillingPage,
+})
+```
+
+<MdxMetrics
+  items={[
+    { label: 'Route setup', value: '~10 min' },
+    { label: 'Type safety', value: 'end-to-end' },
+    { label: 'Refactor risk', value: 'lowered' },
+  ]}
+/>
+
+### Collaboration pattern
+
+Use this lightweight ownership split:
+
+1. Product owns route naming and URL intent
+2. Design owns shared layout primitives and tokens
+3. Engineering owns loaders, actions, and caching
+
+This pattern keeps URL design, data loading, and UI composition in one place.

package/dist/frameworks/react/project/base/content/blog/third-post.md.ejs

@@ -0,0 +1,49 @@
+---
+title: 'Midnight Compass Build'
+description: 'Where to customize theme and typography.'
+pubDate: 'Jul 22 2024'
+heroImage: '/images/lagoon-2.svg'
+---
+
+Update CSS variables in `src/styles.css` to fit your brand.
+
+Then adjust header and footer links to match your product.
+
+## Theme alignment checklist
+
+Before adding one-off colors, audit these variables:
+
+- `--sea-ink` and `--sea-ink-soft` for readable body copy
+- `--surface` and `--surface-strong` for cards and shells
+- `--lagoon` / `--lagoon-deep` for links and active UI affordances
+
+If those are correct, most components will look coherent with zero extra work.
+
+### Accessibility reminder
+
+Check contrast on at least three surfaces:
+
+1. page background
+2. primary card
+3. muted card
+
+You can be highly branded and still hit comfortable readability.
+
+## Typography defaults that travel well
+
+Use a high-contrast display face for headlines and a workhorse sans for body
+copy. Then lock in a spacing scale that keeps article rhythm consistent:
+
+- headings: `mt-10 mb-3`
+- paragraphs: `mb-5`
+- lists: `mb-6`
+
+With those defaults set, long-form pages stay readable across both themes.
+
+### Practical review loop
+
+When you tweak tokens, review these pages in order:
+
+1. Blog detail page (most typography states)
+2. Blog index page (cards + metadata)
+3. Home page (hero and CTA emphasis)

package/dist/frameworks/react/project/base/content-collections.ts.ejs

@@ -0,0 +1,37 @@
+import { defineCollection, defineConfig } from '@content-collections/core'
+import { compileMarkdown } from '@content-collections/markdown'
+import { compileMDX } from '@content-collections/mdx'
+import remarkGfm from 'remark-gfm'
+import { z } from 'zod'
+
+const blog = defineCollection({
+  name: 'blog',
+  directory: 'content/blog',
+  include: '**/*.{md,mdx}',
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    pubDate: z.string(),
+    content: z.string(),
+    heroImage: z.string().optional(),
+  }),
+  transform: async (document, context) => {
+    const isMdx = document._meta.filePath.endsWith('.mdx')
+
+    return {
+      ...document,
+      slug: document._meta.path,
+      pubDate: new Date(document.pubDate).toISOString(),
+      html: isMdx ? null : await compileMarkdown(context, document),
+      mdx: isMdx
+        ? await compileMDX(context, document, {
+            remarkPlugins: [remarkGfm],
+          })
+        : null,
+    }
+  },
+})
+
+export default defineConfig({
+  collections: [blog],
+})

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

@@ -22,6 +22,11 @@
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
+    "@content-collections/core": "^0.13.1",
+    "@content-collections/markdown": "^0.1.4",
+    "@content-collections/mdx": "^0.1.2",
+    "@content-collections/vite": "^0.2.8",
+    "@tailwindcss/typography": "^0.5.16",
     "@tanstack/devtools-vite": "^0.3.11",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
@@ -29,9 +34,11 @@
     "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react": "^5.0.4",
     "jsdom": "^27.0.0",
+    "remark-gfm": "^4.0.1",
     "typescript": "^5.7.2",
     "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.5"
+    "vitest": "^3.0.5",
+    "zod": "^4.3.5"
   }
 }

package/dist/frameworks/react/project/base/public/images/lagoon-1.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 1">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0%" stop-color="#9be2dc"/>
+      <stop offset="55%" stop-color="#65c2c4"/>
+      <stop offset="100%" stop-color="#356f7b"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <circle cx="980" cy="90" r="120" fill="#fff" fill-opacity="0.32"/>
+  <path d="M0 500c160-70 280-70 420 0s260 70 420 0 240-70 360 0v130H0z" fill="#d8f4ec" fill-opacity="0.82"/>
+  <path d="M0 550c160-70 280-70 420 0s260 70 420 0 240-70 360 0v80H0z" fill="#2f6a4a" fill-opacity="0.18"/>
+</svg>

package/dist/frameworks/react/project/base/public/images/lagoon-2.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 2">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0%" stop-color="#b1ebe4"/>
+      <stop offset="50%" stop-color="#73c7b3"/>
+      <stop offset="100%" stop-color="#2f6a4a"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <path d="M0 485c180-96 360-96 540 0s360 96 660 0v145H0z" fill="#f1fbf8" fill-opacity="0.72"/>
+  <circle cx="180" cy="140" r="90" fill="#fff" fill-opacity="0.26"/>
+</svg>

package/dist/frameworks/react/project/base/public/images/lagoon-3.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 3">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0%" stop-color="#8fdcd0"/>
+      <stop offset="60%" stop-color="#4ea7ad"/>
+      <stop offset="100%" stop-color="#1f4f5c"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <path d="M0 520c160-70 320-70 480 0s320 70 720 0v110H0z" fill="#dff6ee" fill-opacity="0.8"/>
+  <path d="M0 560c160-70 320-70 480 0s320 70 720 0v70H0z" fill="#173a40" fill-opacity="0.16"/>
+</svg>

package/dist/frameworks/react/project/base/public/images/lagoon-4.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 4">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="1" y2="0">
+      <stop offset="0%" stop-color="#81d8c9"/>
+      <stop offset="52%" stop-color="#53a9c8"/>
+      <stop offset="100%" stop-color="#2f6a7b"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <circle cx="1040" cy="140" r="96" fill="#fff" fill-opacity="0.24"/>
+  <path d="M0 500c180-85 350-85 520 0s350 85 680 0v130H0z" fill="#effaf6" fill-opacity="0.74"/>
+</svg>

package/dist/frameworks/react/project/base/public/images/lagoon-5.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 5">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0%" stop-color="#9cded4"/>
+      <stop offset="48%" stop-color="#6fb9cf"/>
+      <stop offset="100%" stop-color="#24566b"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <path d="M0 505c160-65 320-65 480 0s320 65 720 0v125H0z" fill="#edf9f4" fill-opacity="0.76"/>
+  <circle cx="260" cy="120" r="102" fill="#fff" fill-opacity="0.2"/>
+</svg>

package/dist/frameworks/react/project/base/public/images/lagoon-about.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon about illustration">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0%" stop-color="#bceee3"/>
+      <stop offset="54%" stop-color="#8cc5be"/>
+      <stop offset="100%" stop-color="#3b7b78"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <rect x="160" y="130" width="880" height="370" rx="34" fill="#fff" fill-opacity="0.28"/>
+  <path d="M220 424h760" stroke="#fff" stroke-opacity="0.6" stroke-width="10" stroke-linecap="round"/>
+  <path d="M220 468h600" stroke="#fff" stroke-opacity="0.46" stroke-width="10" stroke-linecap="round"/>
+  <circle cx="980" cy="190" r="72" fill="#fff" fill-opacity="0.22"/>
+</svg>

package/dist/frameworks/react/project/base/src/components/Footer.tsx.ejs

@@ -0,0 +1,42 @@
+export default function Footer() {
+  const year = new Date().getFullYear()
+
+  return (
+    <footer className="mt-20 border-t border-[var(--line)] px-4 pb-14 pt-10 text-[var(--sea-ink-soft)]">
+      <div className="page-wrap flex flex-col items-center justify-between gap-4 text-center sm:flex-row sm:text-left">
+        <p className="m-0 text-sm">&copy; {year} Your name here. All rights reserved.</p>
+        <p className="island-kicker m-0">Built with TanStack Start</p>
+      </div>
+      <div className="mt-4 flex justify-center gap-4">
+        <a
+          href="https://x.com/tan_stack"
+          target="_blank"
+          rel="noreferrer"
+          className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
+        >
+          <span className="sr-only">Follow TanStack on X</span>
+          <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
+            <path
+              fill="currentColor"
+              d="M12.6 1h2.2L10 6.48 15.64 15h-4.41L7.78 9.82 3.23 15H1l5.14-5.84L.72 1h4.52l3.12 4.73L12.6 1zm-.77 12.67h1.22L4.57 2.26H3.26l8.57 11.41z"
+            />
+          </svg>
+        </a>
+        <a
+          href="https://github.com/TanStack"
+          target="_blank"
+          rel="noreferrer"
+          className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
+        >
+          <span className="sr-only">Go to TanStack GitHub</span>
+          <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
+            <path
+              fill="currentColor"
+              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+            />
+          </svg>
+        </a>
+      </div>
+    </footer>
+  )
+}

package/dist/frameworks/react/project/base/src/components/Header.tsx.ejs

@@ -1,156 +1,110 @@
-<% if (addOns.length === 0 && integrations.length === 0 && routes.length === 0) { ignoreFile() } %>import { Link } from '@tanstack/react-router'
-<% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
-import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
-<% } %><%
-const icons = new Set([
-  "Menu",
-  "X",
-  "Home",
-])
+import { Link } from '@tanstack/react-router'
+<% for (const integration of integrations.filter((i) => i.type === 'header-user')) { %>import <%= integration.jsName %> from '<%= relativePath(integration.path) %>'
+<% } %>import ThemeToggle from './ThemeToggle'
 
-const hasRoutesWithChildren = addOns.some(a => a.routes?.some(r => r.children));
-
-if (hasRoutesWithChildren) {
-  icons.add("ChevronDown");
-  icons.add("ChevronRight");
-}
-
-for(const addOn of addOns) {
-  for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) {
-    icons.add( route.icon || "Globe");
+<%
+const demoRoutes = [];
+for (const addOn of addOns) {
+  for (const route of (addOn?.routes || []).filter((r) => r.url && r.name)) {
+    demoRoutes.push({ url: route.url, name: route.name });
+    for (const child of route.children || []) {
+      if (child?.url && child?.name) {
+        demoRoutes.push({ url: child.url, name: child.name });
+      }
+    }
   }
 }
+const userHeaders = integrations.filter((i) => i.type === 'header-user');
 %>
-import { useState } from 'react';
-import {
-  <%= Array.from(icons).sort().join(", ") %>
-} from "lucide-react";
 
 export default function Header() {
-<%
-const menusWithChildren = addOns.filter(a => a.routes?.some(r => r.children));
-const userHeaders = integrations.filter(i => i.type === 'header-user');
-%>
-  const [isOpen, setIsOpen] = useState(false);
-  <% if (menusWithChildren.length > 0) { %>const [groupedExpanded, setGroupedExpanded] = useState<Record<string, boolean>>({});
-  <% } %>
-
   return (
-    <>
-      <header className="p-4 flex items-center bg-gray-800 text-white shadow-lg">
-        <button
-          onClick={() => setIsOpen(true)}
-          className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
-          aria-label="Open menu"
-        >
-          <Menu size={24} />
-        </button>
-        <h1 className="ml-4 text-xl font-semibold">
-          <Link to="/">
-            <img
-              src="/tanstack-word-logo-white.svg"
-              alt="TanStack Logo"
-              className="h-10"
-            />
+    <header className="sticky top-0 z-50 border-b border-[var(--line)] bg-[var(--header-bg)] px-4 backdrop-blur-lg">
+      <nav className="page-wrap flex flex-wrap items-center gap-x-3 gap-y-2 py-3 sm:py-4">
+        <h2 className="m-0 flex-shrink-0 text-base font-semibold tracking-tight">
+          <Link
+            to="/"
+            className="inline-flex items-center gap-2 rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm text-[var(--sea-ink)] no-underline shadow-[0_8px_24px_rgba(30,90,72,0.08)] sm:px-4 sm:py-2"
+          >
+            <span className="h-2 w-2 rounded-full bg-[linear-gradient(90deg,#56c6be,#7ed3bf)]" />
+            TanStack Start
           </Link>
-        </h1>
-      </header>
+        </h2>
 
-      <aside
-        className={`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 ${
-          isOpen ? "translate-x-0" : "-translate-x-full"
-        }`}
-      >
-        <div className="flex items-center justify-between p-4 border-b border-gray-700">
-          <h2 className="text-xl font-bold">Navigation</h2>
-          <button
-            onClick={() => setIsOpen(false)}
-            className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
-            aria-label="Close menu"
+        <div className="ml-auto flex items-center gap-1.5 sm:ml-0 sm:gap-2">
+          <a
+            href="https://x.com/tan_stack"
+            target="_blank"
+            rel="noreferrer"
+            className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block"
+          >
+            <span className="sr-only">Follow TanStack on X</span>
+            <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
+              <path
+                fill="currentColor"
+                d="M12.6 1h2.2L10 6.48 15.64 15h-4.41L7.78 9.82 3.23 15H1l5.14-5.84L.72 1h4.52l3.12 4.73L12.6 1zm-.77 12.67h1.22L4.57 2.26H3.26l8.57 11.41z"
+              />
+            </svg>
+          </a>
+          <a
+            href="https://github.com/TanStack"
+            target="_blank"
+            rel="noreferrer"
+            className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block"
           >
-            <X size={24} />
-          </button>
+            <span className="sr-only">Go to TanStack GitHub</span>
+            <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
+              <path
+                fill="currentColor"
+                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+              />
+            </svg>
+          </a>
+          <% for (const integration of userHeaders) { %><<%= integration.jsName %> />
+          <% } %>
+          <ThemeToggle />
         </div>
 
-        <nav className="flex-1 p-4 overflow-y-auto">
+        <div className="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">
+          <Link to="/" className="nav-link" activeProps={{ className: 'nav-link is-active' }}>
+            Home
+          </Link>
           <Link
-            to="/"
-            onClick={() => setIsOpen(false)}
-            className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-            activeProps={{
-              className:
-                "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-            }}
+            to="/blog"
+            className="nav-link"
+            activeProps={{ className: 'nav-link is-active' }}
           >
-            <Home size={20} />
-            <span className="font-medium">Home</span>
+            Blog
           </Link>
-
-          {/* Demo Links Start */}
-          <% for(const addOn of addOns) {
-            for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) {
-              if (route.children) { %>
-                <div className="flex flex-row justify-between">
-                  <Link to="<%= route.url %>"
-                    onClick={() => setIsOpen(false)}
-                    className="flex-1 flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-                    activeProps={{
-                      className:
-                        "flex-1 flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-                    }}
-                  >
-                    <<%= route.icon || "Globe" %> size={20} />
-                    <span className="font-medium"><%= route.name %></span>  
-                  </Link>
-                  <button
-                    className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
-                    onClick={() => setGroupedExpanded(prev => ({ ...prev, <%= route.jsName %>: !prev.<%= route.jsName %> }))}>
-                    {groupedExpanded.<%= route.jsName %> ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
-                  </button>
-                </div>
-                {groupedExpanded.<%= route.jsName %> && (
-                  <div className="flex flex-col ml-4">
-                    <% for(const child of route.children) { %>
-                      <Link
-                        to="<%= child.url %>"
-                        onClick={() => setIsOpen(false)}
-                        className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-                        activeProps={{
-                          className:
-                            "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-                        }}
-                      >
-                        <<%= child.icon || "Globe" %> size={20} />
-                        <span className="font-medium"><%= child.name %></span>
-                      </Link>
-                    <% } %>
-                </div>
-                )}
-            <% } else { %>
-              <Link
-                to="<%= route.url %>"
-                onClick={() => setIsOpen(false)}
-                className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-                activeProps={{
-                  className:
-                    "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-                }}
+          <Link
+            to="/about"
+            className="nav-link"
+            activeProps={{ className: 'nav-link is-active' }}
+          >
+            About
+          </Link>
+          <a
+            href="https://tanstack.com/start/latest/docs/framework/react/overview"
+            className="nav-link"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Docs
+          </a>
+          <% if (demoRoutes.length > 0) { %><details className="relative w-full sm:w-auto">
+            <summary className="nav-link list-none cursor-pointer">Demos</summary>
+            <div className="mt-2 min-w-56 rounded-xl border border-[var(--line)] bg-[var(--header-bg)] p-2 shadow-lg sm:absolute sm:right-0">
+              <% for (const route of demoRoutes) { %><a
+                href="<%= route.url %>"
+                className="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)]"
               >
-                <<%= route.icon || "Globe" %> size={20} />
-                <span className="font-medium"><%= route.name %></span>
-              </Link>
-          <% } } } %>
-          {/* Demo Links End */}
-        </nav>
-
-        <% if (userHeaders.length > 0) { %>
-        <div className="p-4 border-t border-gray-700 bg-gray-800 flex flex-col gap-2">
-          <% for(const integration of userHeaders) { %>
-            <<%= integration.jsName %> />
-          <% } %>
+                <%= route.name %>
+              </a>
+              <% } %>
+            </div>
+          </details><% } %>
         </div>
-        <% } %>
-      </aside>
-    </>
-  );
+      </nav>
+    </header>
+  )
 }

package/dist/frameworks/react/project/base/src/components/MdxCallout.tsx.ejs

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+
+export function MdxCallout({
+  title,
+  children,
+}: {
+  title: string
+  children: ReactNode
+}) {
+  return (
+    <aside className="not-prose my-6 rounded-xl border border-[var(--line)] bg-[var(--chip-bg)] p-4">
+      <p className="island-kicker mb-2">{title}</p>
+      <div className="text-sm leading-7 text-[var(--sea-ink-soft)]">{children}</div>
+    </aside>
+  )
+}