How to Integrate shadcn/ui into Laravel Using Inertia + React (Step-by-Step Guide)

Modern web development often feels like choosing between two worlds:

• Backend frameworks like Laravel
• Frontend frameworks like React But what if you could combine them cleanly - without building a full API layer or managing two separate applications?

That’s exactly what this guide will show you.
We’ll build a modern Laravel application using:

• Laravel (backend logic)
• Inertia.js (bridge between backend and frontend)
• React (UI rendering)
• Tailwind CSS v4
• shadcn/ui (beautiful, customizable components) If you're a beginner, don’t worry. We’ll go step by step and explain what each piece does and why we need it.

By the end of this tutorial, you’ll have a working Laravel + React + shadcn setup.
What We’re Building (Beginner-Friendly Explanation)
Before jumping into commands, let’s understand the architecture in simple terms.

Normally, Laravel renders Blade templates on the server.

But with Inertia.js, Laravel sends data to a React frontend without building a separate API. You still define routes in Laravel, but React handles rendering the UI.

shadcn/ui then gives us high-quality UI components built on Tailwind CSS.

So the flow looks like this:

Laravel Route → Inertia → React Page → shadcn Component

This keeps everything inside one project while still giving us a modern frontend.

Prerequisites

Make sure you have:

• PHP 8.1+
• Composer
• Node.js 18+
• npm
• Basic knowledge of Laravel and React

If you need Laravel installation instructions, refer to the official documentation:

https://laravel.com/docs/installation

Create a New Laravel Project

Let’s begin with a fresh Laravel app:

composer create-project laravel/laravel laravel-shadcnui

cd shadcn-laravel

Install Node dependencies:

npm install

At this stage, we have a clean Laravel project with Vite support.

*Install Inertia (Laravel Side)
*
Now install Inertia on the backend:

composer require inertiajs/inertia-laravel

Generate the middleware:

php artisan inertia:middleware

This creates:

app/Http/Middleware/HandleInertiaRequests.php

Important: Why php artisan install:react Fails

You might try running:

php artisan install:react

You’ll get an error because this command does not exist in Laravel.

That’s why you see an error.

Laravel does not automatically install React. You must install React manually on the frontend side using npm.

Register Inertia Middleware

Laravel 11+ changed its structure and removed Kernel.php. So middleware registration differs depending on your version.

Laravel 10 and Older
Edit:

app/Http/Kernel.php

Add:

'web' => [
    ...
    \App\Http\Middleware\HandleInertiaRequests::class,
],

inside the web middleware group.
Laravel 11 / 12
Edit:

bootstrap/app.php

Find:

->withMiddleware(function (Middleware $middleware) {
    //
})

Update middleware section:

use App\Http\Middleware\HandleInertiaRequests;
use Illuminate\Foundation\Configuration\Middleware;

->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
})

Install React + Vite

npm install react react-dom
npm install @vitejs/plugin-react --save-dev

Install Tailwind CSS v4

Install Tailwind v4 using the Vite plugin:

npm i tailwindcss @tailwindcss/vite

Tailwind v4 uses a Vite plugin approach instead of the old PostCSS method.
Update vite.config.js:
Make sure it looks like this:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'resources/js'),
    },
  },
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.jsx'],
      refresh: true,
    }),
    tailwindcss(),
    react(),
  ],
})

Remove Old PostCSS Config (If Exists)

If you previously followed a Tailwind v3 tutorial and created:

• postcss.config.js
• autoprefixer setup Remove them unless you explicitly need PostCSS plugins.

In Tailwind v4, using old PostCSS config often causes errors.

Install Inertia React (Frontend)

Now install Inertia for React:

npm i @inertiajs/react

Configure Root Blade View

Create:

resources/views/app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    @vite(['resources/css/app.css', 'resources/js/app.jsx'])
    @inertiaHead
</head>
<body>
    @inertia
</body>
</html>

Configure Inertia Root View

If config/inertia.php does not exist, publish it:

php artisan vendor:publish --provider="Inertia\ServiceProvider"

Configure Routes

Open: routes/web.php

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home');
});

Create React Entry File

resources/js/app.jsx

import '../css/app.css'
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
    return pages[`./Pages/${name}.jsx`]
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />)
  },
})

Create First Page

resources/js/Pages/Home.jsx

export default function Home() {
  return <div className="p-6">Hello Inertia + React</div>
}

Add shadcn/ui

Official guide:

https://ui.shadcn.com/docs/installation/vite

Initialize:

npx shadcn@latest init

Add button:

npx shadcn@latest add button

Use the Component

Update Home.jsx:

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

export default function Home() {
    return (
        <div className="p-6 text-center bg-amber-50">
            <span className="mr-2">Hello i am shadcn ui in laravel with vite and React</span>
            <Button>Click me</Button>
        </div>
    )
}

You are now officially using shadcn/ui inside Laravel.

Add Watch Command (Optional but Helpful)

In package.json:

"scripts": {
  "watch": "vite build --watch"
}

Run:

npm run watch

This allows you to see changes without rebuilding manually.

Run the Project

npm install
npm run warch
php artisan serve

Visit:

http://127.0.0.1:8000

You should see your shadcn Button rendered inside a Laravel app.

Clone the Final Source Code

If you want to skip the manual setup and directly explore the completed project, you can clone the repository:

gitclone https://github.com/smitbhalodiya/laravel-shadcnui.gitcd laravel-shadcnui
composer install
npm install
npm run dev
php artisan serve

Repository link:

https://github.com/smitbhalodiya/laravel-shadcnui

This repository contains the complete working configuration described in this article.
Final Project Structure

resources/
 ├── js/
 │   ├── app.jsx
 │   ├── Pages/
 │   └── components/ui/
 ├── css/app.css
 └── views/app.blade.php

You can also check Shadcn Studio, which you can use with Laravel using Inertia React as well. It comes with 700+ Ready To use Shadcn Blocks, 1000+ Shadcn Component Variants. Also, it offers Shadcn Builder, Shadcn Templates, AI MCP builder, and the Figma design system as well.

Conclusion

Integrating shadcn/ui into Laravel becomes straightforward once you understand the roles:

• Laravel handles backend logic
• Inertia connects backend and frontend
• React renders the interface
• Tailwind styles everything
• shadcn provides polished components

Instead of treating Laravel and React as separate worlds, Inertia lets them work together naturally.

This approach gives you:

• Full backend control
• Modern React UI
• Clean, customizable components
• No heavy UI dependencies
• Excellent developer experience

From here, you can extend this setup with:

• Authentication (Laravel Breeze + React)
• Layout systems
• Theming with shadcn
• Full SaaS dashboards

You now have a production-ready foundation for modern Laravel applications.