Laravel

Install newt/ui in a Laravel app running Inertia, with either the React or the Vue starter kit.

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 laravel new

npx laravel new

yarn dlx laravel new

bunx laravel new

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

npx newtui@latest init --preset <code>

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

bunx newtui@latest init --preset <code>

pnpm dlx newtui@latest add button

npx newtui@latest add button

yarn dlx newtui@latest add button

bunx newtui@latest add button

Laravel has no scaffold template, so the project is created by its own tool first and init runs inside the result. It detects the framework, the bundler and the stylesheet on its own.

pnpm dlx laravel new

npx laravel new

yarn dlx laravel new

bunx laravel new

pnpm dlx newtui@latest init

npx newtui@latest init

yarn dlx newtui@latest init

bunx newtui@latest init

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

laravel new my-app --react

laravel new my-app --vue

The Inertia starter kits ship Vite and Tailwind v4 already wired, which is the part init cannot do for you.

Declare the alias twice

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

import { fileURLToPath } from "node:url"

import laravel from "laravel-vite-plugin"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [
    laravel({ input: ["resources/css/app.css", "resources/js/app.tsx"] }),
  ],
  resolve: {
    alias: { "@": fileURLToPath(new URL("./resources/js", import.meta.url)) },
  },
})

Run init

pnpm dlx newtui@latest init --framework react --css resources/css/app.css

npx newtui@latest init --framework react --css resources/css/app.css

yarn dlx newtui@latest init --framework react --css resources/css/app.css

bunx newtui@latest init --framework react --css resources/css/app.css

pnpm dlx newtui@latest init --framework vue --bundler vite --css resources/css/app.css

npx newtui@latest init --framework vue --bundler vite --css resources/css/app.css

yarn dlx newtui@latest init --framework vue --bundler vite --css resources/css/app.css

bunx newtui@latest init --framework vue --bundler vite --css resources/css/app.css

There is no --template for Laravel: the app comes from laravel new, and init runs inside it. --css points at the stylesheet the Blade layout already loads.

Mark the root layout

<body class="newt-root font-sans antialiased">
    @inertia
</body>

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

<script setup lang="ts">
import { Button } from "@/components/ui/button"
</script>

<template>
  <Button variant="primary">Send</Button>
</template>

Blade without Inertia

An app that renders Blade templates and no JavaScript framework wants the plain CSS flavour instead: two stylesheets, BEM class names, no build step beyond the one Vite already runs. That is HTML & CSS.

What init writes

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

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