Next.js

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

Choose the brand hue, the radius and the font in newt/create, and it prints a preset code. Pass that code to init and the project comes out already wearing it.

pnpm dlx newtui@latest init --preset <code> --template next

npx newtui@latest init --preset <code> --template next

yarn dlx newtui@latest init --preset <code> --template next

bunx newtui@latest init --preset <code> --template next

pnpm dlx newtui@latest add button

npx newtui@latest add button

yarn dlx newtui@latest add button

bunx newtui@latest add button

One command creates the project and wires the tokens into it. --template exists for Next.js, both Vite flavours and Nuxt; everywhere else init runs inside a project you already made.

pnpm dlx newtui@latest init --template next

npx newtui@latest init --template next

yarn dlx newtui@latest init --template next

bunx newtui@latest init --template next

pnpm dlx newtui@latest add button

npx newtui@latest add button

yarn dlx newtui@latest add button

bunx newtui@latest add button

Create the app

npx create-next-app@latest my-app --typescript --tailwind --app

Check the aliases

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

{
  "compilerOptions": {
    "paths": { "@/*": ["./src/*"] }
  }
}

Run init

pnpm dlx newtui@latest init

npx newtui@latest init

yarn dlx newtui@latest init

bunx newtui@latest init

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

Put the root class on the body

import "./globals.css"

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

Add a component

pnpm dlx newtui@latest add button

npx newtui@latest add button

yarn dlx newtui@latest add button

bunx newtui@latest add button

import { Button } from "@/components/ui/button"

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

Server components

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, and add strips them as it writes — which is what a pages-router or client-rendered app wants.

What init writes

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 for the theme toggle, and RTL if the app has to run right to left.