TanStack Start

PreviousNext

Install and configure shadcn/ui for TanStack Start.

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

Install tailwindcss and its dependencies.

pnpm add tailwindcss @tailwindcss/postcss postcss

Create postcss.config.ts

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

postcss.config.ts
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

Create app/styles/app.css

Create an app.css file in the app/styles directory and import tailwindcss

app/styles/app.css
@import "tailwindcss" source("../");

Import app.css

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 Starter",
      },
    ],
    links: [
      {
        rel: "stylesheet",
        href: appCss,
      },
    ],
  }),
  component: RootComponent,
})

Edit tsconfig.json file

Add the following code to the tsconfig.json file to resolve paths.

tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./app/*"]
    }
  }
}

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.

That's it

You can now start adding components to your project.

pnpm dlx shadcn@canary add button

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

app/routes/index.tsx
import { Button } from "@/components/ui/button"
 
function Home() {
  const router = useRouter()
  const state = Route.useLoaderData()
 
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}