Install shadcn/ui TanStack
How to install shadcn/ui with TanStack Start. Modern file-based routing with full-stack React capabilities.
How to install shadcn/ui with TanStack Start
TanStack Start brings file-based routing to React with powerful data loading patterns. Combined with shadcn/ui, you get a modern alternative to Next.js with more control over your routing.
TanStack Start setup
Create TanStack Start project
Follow the official TanStack Start guide to create your project from scratch.
Important: Don't add Tailwind yet—we'll install v4 in the next step.
Install Tailwind CSS v4
pnpm add tailwindcss @tailwindcss/postcss postcssCreate postcss.config.ts:
export default {
plugins: {
"@tailwindcss/postcss": {},
},
}Create styles
Create app/styles/app.css:
@import "tailwindcss" source("../");Import in your root route:
// app/routes/__root.tsx
import type { ReactNode } from "react"
import { createRootRoute, Outlet } from "@tanstack/react-router"
import { Meta, Scripts } from "@tanstack/start"
import appCss from "@/styles/app.css?url"
export const Route = createRootRoute({
head: () => ({
meta: [
{ charSet: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ title: "TanStack Start + shadcn/ui" },
],
links: [
{ rel: "stylesheet", href: appCss },
],
}),
component: RootComponent,
})
function RootComponent() {
return (
<>
<Meta />
<Outlet />
<Scripts />
</>
)
}Configure TypeScript paths
Add to tsconfig.json:
{
"compilerOptions": {
"jsx": "react-jsx",
"baseUrl": ".",
"paths": {
"@/*": ["./app/*"]
}
}
}Initialize shadcn/ui
npx shadcn@canary initNote: TanStack Start requires the canary version of the CLI.
Add components
npx shadcn@canary add button card formUse in your routes:
// app/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
export const Route = createFileRoute("/")({
component: HomePage,
})
function HomePage() {
return (
<div className="container mx-auto p-8">
<Card>
<CardHeader>
<CardTitle>TanStack Start + shadcn/ui</CardTitle>
</CardHeader>
<CardContent>
<p>Modern routing with beautiful components</p>
<Button className="mt-4">Get Started</Button>
</CardContent>
</Card>
</div>
)
}File structure
Deployment
TanStack Start apps deploy to:
| Platform | Setup | Best For |
|---|---|---|
| Vercel | Automatic adapter detection | Seamless integration |
| Netlify | Functions for SSR | Great developer experience |
| Cloudflare Pages | Edge runtime support | Global performance |
| Node.js | Standard Node deployment | Traditional hosting |
Next steps
With TanStack Start + shadcn/ui ready:
- Browse official components for forms, tables, and UI elements
- Add charts for data visualization
- Explore community components for extended functionality
- Add useful hooks to enhance your components
- Use pre-built blocks to quickly build common layouts
TanStack Start's modern routing combined with shadcn/ui's component flexibility gives you a powerful, type-safe foundation for building React applications.