Installation: TanStack Router

Core Idea

Single-command scaffold: create-tsrouter-app has a built-in shadcn add-on that configures everything in one step, unlike most other frameworks' multi-path guides.

Key Concepts

• --add-ons shadcn: create-tsrouter-app flag that wires up shadcn/ui during project creation itself, no separate shadcn init needed.
• @/* alias: same convention as Next.js/Vite/Astro.

Code Examples

npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn
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>
      <Button>Click me</Button>
    </div>
  )
}

• O que demonstra: rota TanStack Router criada com createFileRoute, componente shadcn importado com alias @/.

Anti-patterns

• Running a separate shadcn init after this scaffold command: not needed, --add-ons shadcn already does it.

Key Takeaways

1. This is the only installation guide with a single all-in-one scaffold command (no separate create + create/CLI + existing-project split).
2. TanStack Router (file-based router) is distinct from TanStack Start (full-stack framework), see the next chapter for the latter's guide.

Connects To

• installation-tanstack: TanStack Start, a different (full-stack) TanStack product with its own three-path installation guide.