---
title: "TanStack Start"
description: "Install newt/ui in a TanStack Start app: the root route stylesheet, the alias, and the two commands."
---

Create the project with `npx newtui@latest init` — `--template <name>` scaffolds Next.js, Vite and Nuxt from nothing, and `--preset <code>` applies a preset from https://newtui.dev/create — or wire it into a project you already have:

1. **Create the app**

    ```bash
    npx create-tsrouter-app@latest my-app --template file-router --tailwind
    ```

    The template already carries Tailwind v4 through the Vite plugin. An app made
    without `--tailwind` needs `tailwindcss` and `@tailwindcss/vite` installed and
    the plugin added to `vite.config.ts`.

2. **Declare the alias twice**

    ```json title="tsconfig.json"
    {
      "compilerOptions": {
        "paths": { "@/*": ["./src/*"] }
      }
    }
    ```

    ```ts title="vite.config.ts"
    import { fileURLToPath } from "node:url"

    import { defineConfig } from "vite"

    export default defineConfig({
      resolve: {
        alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) },
      },
    })
    ```

3. **Run init**

    ```bash
    npx newtui@latest init
    ```

    There is no `--template` for TanStack Start: the app is created by
    `create-tsrouter-app` above, and `init` reads what it finds — React from the
    dependencies, the stylesheet from `src/styles.css`.

4. **Mark the root document**

    The root route owns the `<body>`, so `.newt-root` goes there:

    ```tsx title="src/routes/__root.tsx"
    import appCss from "../styles.css?url"

    export const Route = createRootRoute({
      head: () => ({ links: [{ rel: "stylesheet", href: appCss }] }),
      component: () => (
        <html lang="en">
          <body className="newt-root">
            <Outlet />
          </body>
        </html>
      ),
    })
    ```

5. **Add a component**

    ```bash
    npx newtui@latest add button
    ```

    ```tsx title="src/routes/index.tsx"
    import { Button } from "@/components/ui/button"

    export const Route = createFileRoute("/")({
      component: () => <Button variant="primary">Send</Button>,
    })
    ```

## Server rendering [#ssr]

Start renders on the server by default, so the same rule as Next applies: the
nine interactive components carry `"use client"`. Answer yes to the React Server
Components question at `init` to keep those directives, no to have `add` strip
them.

## What init writes [#written]

```text
components.json                 the config, shared with shadcn
src/styles.css                  the --newt-* token block
src/lib/utils.ts                cn()
src/components/ui/button.tsx    add button
```

See [Dark mode](/docs/dark-mode) for the theme toggle, and [RTL](/docs/rtl) if
the app has to run right to left.