TanStack Start Installation

Install and configure your UI components for TanStack Start projects.

Create project

Start by creating a new TanStack Start project by following the Build a Project from Scratch guide on the TanStack Start website.

Do not add Tailwind yet. We'll install Tailwind v4 in the next step.

Add Tailwind

pnpm add tailwindcss @tailwindcss/postcss postcss

Create postcss.config.ts

Create a postcss.config.ts file at the root of your project:

1export default {
2  plugins: {
3    "@tailwindcss/postcss": {},
4  },
5}

Create app/styles/app.css

Create an app.css file in the app/styles directory and import Tailwind CSS:

1@import "tailwindcss" source("../");

Import app.css

Import app.css in your root route file:

1import type { ReactNode } from "react"
2import { createRootRoute, Outlet } from "@tanstack/react-router"
3import { Meta, Scripts } from "@tanstack/start"
4
5import appCss from "@/styles/app.css?url"
6
7export const Route = createRootRoute({
8  head: () => ({
9    meta: [
10      {
11        charSet: "utf-8",
12      },
13      {
14        name: "viewport",
15        content: "width=device-width, initial-scale=1",
16      },
17      {
18        title: "TanStack Start Starter",
19      },
20    ],
21    links: [
22      {
23        rel: "stylesheet",
24        href: appCss,
25      },
26    ],
27  }),
28  component: RootComponent,
29})

Edit tsconfig.json

Add the following to tsconfig.json to resolve paths:

1{
2  "compilerOptions": {
3    "jsx": "react-jsx",
4    "moduleResolution": "Bundler",
5    "module": "ESNext",
6    "target": "ES2022",
7    "skipLibCheck": true,
8    "strictNullChecks": true,
9    "baseUrl": ".",
10    "paths": {
11      "@/*": ["./app/*"]
12    }
13  }
14}

Run the CLI

Run the shadcn init command to setup your project:

pnpm dlx shadcn@canary init

This will create a components.json file in the root of your project and configure CSS variables inside app/styles/app.css.

Add Components

You can now start adding components to your project. For example, to add the Button component:

pnpm dlx shadcn@canary add button

The command above will add the Button component to your project. You can then import and use it like this:

1import { Button } from "@/components/ui/button"
2
3function Home() {
4  const router = useRouter()
5  const state = Route.useLoaderData()
6
7  return (
8    <div>
9      <Button>Click me</Button>
10    </div>
11  )
12}

For more details, see the documentation for each component.