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.

Add Tailwind CSS

Install tailwindcss and its dependencies.

loading...

Create postcss.config.ts

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

postcss.config.tsexport 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.tsximport 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:

loading...

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

Enter license

Enter your license key to unlock the full features of Pure UI:

Initialize design system

Use Design System to learn and initialize your own design system or start with the default theme:

loading...

Add components

You can now start adding components to your project.

loading...

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

app/routes/index.tsximport { Button } from "@/components/ui/button"

function Home() {
  const router = useRouter()
  const state = Route.useLoaderData()

  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}