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

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**

    <div data-framework="react">

    ```bash
    laravel new my-app --react
    ```

    </div>

    <div data-framework="vue">

    ```bash
    laravel new my-app --vue
    ```

    </div>

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

2. **Declare the alias twice**

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

    ```js title="vite.config.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)) },
      },
    })
    ```

3. **Run init**

    <div data-framework="react">

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

    </div>

    <div data-framework="vue">

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

    </div>

    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.

4. **Mark the root layout**

    ```blade title="resources/views/app.blade.php"
    <body class="newt-root font-sans antialiased">
        @inertia
    </body>
    ```

5. **Add a component**

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

    <div data-framework="react">

    ```tsx title="resources/js/pages/welcome.tsx"
    import { Button } from "@/components/ui/button"

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

    </div>

    <div data-framework="vue">

    ```vue title="resources/js/pages/Welcome.vue"
    <script setup lang="ts">
    import { Button } from "@/components/ui/button"
    </script>

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

    </div>

## Blade without Inertia [#blade]

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](/docs/html-css).

## What init writes [#written]

```text
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](/docs/dark-mode) for the theme toggle, and [RTL](/docs/rtl) if
the app has to run right to left.