---
title: "Next.js"
description: "Install newt/ui in a Next.js project: where the tokens go, and which components need the client boundary."
---

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-next-app@latest my-app --typescript --tailwind --app
    ```

2. **Check the aliases**

    `init` reads your aliases, it never writes them. `create-next-app` declares the
    one that matters:

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

3. **Run init**

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

    It finds `app/globals.css` first, so the tokens land in the stylesheet your
    layout already imports.

4. **Put the root class on the body**

    ```tsx title="app/layout.tsx"
    import "./globals.css"

    export default function RootLayout({
      children,
    }: {
      children: React.ReactNode
    }) {
      return (
        <html lang="en">
          <body className="newt-root">{children}</body>
        </html>
      )
    }
    ```

5. **Add a component**

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

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

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

## Server components [#rsc]

Nine components ship with a `"use client"` directive — the interactive ones:
modal, tabs, toast, reaction, spoiler, form-fields, permission, stage-banner and
token-field. The rest render on the server.

Answering yes to the React Server Components question at `init` keeps those
directives. Answering no sets `rsc: false` in
[`components.json`](/docs/components-json), and `add` strips them as it writes —
which is what a pages-router or client-rendered app wants.

## What init writes [#written]

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

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