TanStack Start

Set up Layout UI in a TanStack Start project with full-stack React, Vite, and Tailwind v4.

New project

Create a TanStack Start app
TanStack Start uses the TanStack Router CLI for project scaffolding:
```
npm create tanstack@latest
# Choose: Start / React / TypeScript
cd my-app
npm install
```

Install Tailwind v4

npm install tailwindcss @tailwindcss/vite

Add the Tailwind plugin to app.config.ts:

import { defineConfig } from "@tanstack/react-start/config";
import tailwindcss from "@tailwindcss/vite";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";

export default defineConfig({
  vite: {
    plugins: [TanStackRouterVite(), tailwindcss()],
  },
});

Create app/styles/globals.css:

@import "tailwindcss";

Import it in your root route (app/routes/__root.tsx):

import "@/styles/globals.css";

Configure path aliases

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./app/*"] }
  }
}

Mirror the alias in app.config.ts using vite-tsconfig-paths:

npm install -D vite-tsconfig-paths

import tsconfigPaths from "vite-tsconfig-paths";
// add to vite.plugins: [TanStackRouterVite(), tailwindcss(), tsconfigPaths()]

Initialise shadcn

npx shadcn@latest init -y -b base -p nova

Add the Layout registry and install components

// components.json
{
  "registries": {
    "@layout": "https://ui.layout.design/r/{name}.json"
  }
}