TanStack Start

Install shadcn/ui in TanStack Start with the official CLI. File routes, then add a component from the shadcn.io registry. TypeScript and Tailwind CSS.

init -t start scaffolds the app. For an existing Start app: @tanstack/cli create (do not tick the shadcn add-on), then init. Routes use createFileRoute.

Use the CLI

Scaffold Start from the terminal

Existing project

Add shadcn to an app you have

Use the CLI

Create the project

npx shadcn@latest init -t start

Monorepo:

npx shadcn@latest init -t start --monorepo

Add a component

npx shadcn@latest add https://www.shadcn.io/r/card.json

Monorepo: from apps/web, or -c apps/web from the root.

Import it

src/routes/index.tsx

import { createFileRoute } from "@tanstack/react-router"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

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

function App() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your TanStack Start app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

Monorepo: apps/web/src/routes/index.tsx, import @workspace/ui/components/card.

Existing project

Create the app if you need one

npx @tanstack/cli@latest create

TanStack Start, React, recommended defaults. Tailwind and @/* come with that.

Do not add the shadcn add-on

The prompt will offer it. Skip it. npx shadcn@latest init configures the project in the next step.

Run init

npx shadcn@latest init

Add a component

npx shadcn@latest add https://www.shadcn.io/r/button.json

src/routes/index.tsx

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>
  )
}