---
title: "React Router"
description: "Install newt/ui in a React Router framework-mode app: the root layout, 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-react-router@latest my-app
    ```

    The default template ships Tailwind v4 and Vite. An app without it needs
    `tailwindcss` and `@tailwindcss/vite` installed and the plugin added to
    `vite.config.ts`.

2. **Declare the alias twice**

    The template already declares `~/*`; `@/*` is the alias `init` looks for first,
    and either one works as long as both files agree:

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

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

    import { defineConfig } from "vite"

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

3. **Run init**

    ```bash
    npx newtui@latest init --css app/app.css
    ```

    There is no `--template` for React Router. `--css` points `init` at the
    stylesheet the root route already links, which is where the tokens belong.

4. **Mark the root layout**

    ```tsx title="app/root.tsx"
    export function Layout({ children }: { children: React.ReactNode }) {
      return (
        <html lang="en">
          <head>
            <Meta />
            <Links />
          </head>
          <body className="newt-root">
            {children}
            <Scripts />
          </body>
        </html>
      )
    }
    ```

5. **Add a component**

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

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

    export default function Home() {
      return <Button variant="primary">Send</Button>
    }
    ```

## Server rendering [#ssr]

Framework mode renders on the server, so the nine interactive components keep
their `"use client"` directive. Answering no to the React Server Components
question at `init` has `add` strip them — which is what an app running in SPA
mode wants.

## What init writes [#written]

```text
components.json                 the config, shared with shadcn
app/app.css                     the --newt-* token block
app/lib/utils.ts                cn()
app/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.