Installation: TanStack Start

Core Idea

Same three-path pattern as Next.js/Vite/Astro/React Router (shadcn/create, CLI, existing project). Uses @/* alias and TanStack's createFileRoute route convention.

Key Concepts

• init -t start / --monorepo: standard CLI scaffold flags.
• npx @tanstack/cli@latest create: scaffolds a new TanStack Start project; choose the recommended defaults for Tailwind + @/* alias.
• Do not add the shadcn add-on during @tanstack/cli create: the guide explicitly says skip it and let shadcn init configure things afterward, unlike TanStack Router's single-command flow.

Code Examples

npx @tanstack/cli@latest create        # skip the shadcn add-on prompt
npx shadcn@latest init
npx shadcn@latest add button

import { createFileRoute } from "@tanstack/react-router"
import { Button } from "@/components/ui/button"

export const Route = createFileRoute("/")({
  component: App,
})

function App() {
  return (
    <div className="flex min-h-svh items-center justify-center p-6">
      <Button>Click me</Button>
    </div>
  )
}

• O que demonstra: rota TanStack Start com createFileRoute, mesmo padrão do TanStack Router mas em contexto full-stack.

Anti-patterns

• Selecting the shadcn add-on during @tanstack/cli create for Start: contradicts the documented flow (unlike TanStack Router, where the add-on is the recommended path); do the two-step init afterward instead.

Key Takeaways

1. TanStack Start (full-stack) and TanStack Router (file-based router) have different installation guides with different recommended flows — don't conflate them.
2. Monorepo: -c apps/web on add, import from @workspace/ui/components/card in apps/web/src/routes/*.

Connects To

• installation-tanstack-router: sibling TanStack product, single-command install differs from this guide's multi-step flow.
• installation-next: same shadcn/create/CLI/existing-project structure.