Vite (React)

Install newt/ui in a React project built with Vite, from the template or into an app you already have.

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 vite-react

npx newtui@latest init --preset <code> --template vite-react

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

bunx newtui@latest init --preset <code> --template vite-react

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 vite-react

npx newtui@latest init --template vite-react

yarn dlx newtui@latest init --template vite-react

bunx newtui@latest init --template vite-react

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

npm create vite@latest my-app -- --template react-ts

Add Tailwind

npm install tailwindcss @tailwindcss/vite

@import "tailwindcss";

Declare the alias twice

Once for the type checker, once for the bundler — init reads the first and your build needs the second:

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

import { fileURLToPath } from "node:url"

import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) },
  },
})

Run init

pnpm dlx newtui@latest init

npx newtui@latest init

yarn dlx newtui@latest init

bunx newtui@latest init

It detects React from your dependencies; --framework react settles it if the project carries both.

Load the stylesheet, then add a component

import "./index.css"

.newt-root goes on the element that wraps the application — the <body> in index.html is the usual place.

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 function App() {
  return <Button variant="primary">Send</Button>
}

What init writes

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

See Dark mode for the theme toggle, and RTL if the app has to run right to left.