TanStack Router

Install shadcn/ui in a TanStack Router SPA. create-tsrouter-app with Tailwind and the shadcn add-on, then add a component from the shadcn.io registry.

This is the SPA. Full-stack Start is TanStack Start. Official scaffold already turns on Tailwind and shadcn.

Create the project

npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn

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>
      <Button>Click me</Button>
    </div>
  )
}