DEV Community: Ai-tools

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

Ai-tools — Thu, 23 Apr 2026 10:43:12 +0000

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.

How to Choose the Best Payment Gateway for International Business

Ai-tools — Wed, 22 Apr 2026 14:20:40 +0000

Expanding your business globally is easier than ever—but accepting payments from international customers is where many businesses struggle. Different currencies, varying regulations, and multiple payment preferences can make the process complex.

That’s where choosing the right payment gateway for international business becomes critical. A good payment gateway not only helps you accept payments smoothly but also improves customer trust, reduces transaction failures, and protects your revenue.

In this guide, you’ll learn exactly how to choose the best payment gateway for your international business, even if you’re just starting out.

What is an International Payment Gateway?

An international payment gateway is a technology that allows businesses to accept payments from customers across different countries. It acts as a bridge between your website (or app) and the financial institutions that process the payment.

How it works:

A customer enters their payment details
The gateway encrypts the data
It sends the request to the payment processor
The bank approves or declines the transaction
Funds are transferred to your account

Popular examples include Stripe, PayPal, Wise, and Payoneer.

Why Choosing the Right Payment Gateway Matters

Picking the wrong payment gateway can hurt your business more than you think.

Higher Cart Abandonment: If customers don’t see their preferred payment method, they may leave
Extra Fees: Hidden charges can reduce your profit margins
Poor User Experience: Slow or failed transactions damage trust
Limited Growth: Some gateways don’t support all countries

On the other hand, the right gateway helps you scale globally with ease.

Key Factors to Consider When Choosing a Payment Gateway

1. Supported Countries & Regions

Not all payment gateways are available worldwide. Before choosing one, check if it supports:

Your business location
Your target customer countries

This is especially important for businesses in countries like Pakistan, where options may be limited.

Before choosing a gateway, always review the Stripe Supported Countries list to ensure your business and target markets are covered.

2. Supported Currencies

A good international payment gateway should support multiple currencies.

Accept payments in local currencies
Avoid high conversion fees
Provide automatic currency conversion

This improves the customer experience and increases conversion rates.

3. Transaction Fees & Pricing

Always review the full pricing structure.

Look for:

Transaction fees (usually 2–4%)
Cross-border charges
Currency conversion fees
Monthly or setup fees

Even small differences in fees can significantly impact your profits over time.

4. Payment Methods Supported

Your customers may prefer different payment methods depending on their country.

A strong gateway should support:

Credit/debit cards (Visa, Mastercard)
Digital wallets (Apple Pay, Google Pay)
Local payment methods (like regional wallets or bank transfers) More options = higher chances of successful payments.

5. Security & Compliance

Security is non-negotiable in online payments.

Make sure the gateway offers:

PCI-DSS compliance
Data encryption
Fraud detection tools This protects both your business and your customers.

6. Ease of Integration

If a gateway is difficult to integrate, it can slow down your business.

Look for:

Simple APIs
Plugins for platforms like Shopify or WooCommerce
Developer-friendly documentation If you're non-technical, choose a gateway with easy setup options.

7. Settlement Time

Settlement time is how quickly you receive your money.

Some gateways take 1–2 days
Others may take up to a week

Faster settlements improve your cash flow.

8. Customer Support

Issues can happen anytime, especially with international payments.

Choose a provider that offers:

24/7 support
Multiple support channels (chat, email, phone) Reliable support can save you from major losses.

Top Payment Gateways for International Business

Here are some of the most popular options:

Stripe

Best for SaaS and developers
Powerful APIs
Supports subscriptions and global payments
PayPal
Widely trusted
Easy to set up
Available in many countries
Wise
Low-cost international transfers
Transparent fees
Payoneer
Ideal for freelancers and marketplaces
Easy withdrawals
Each has its own pros and cons, so choose based on your business needs.

Best Payment Gateways by Use Case

For E-commerce Businesses

Look for gateways that integrate with Shopify or WooCommerce
Support multiple currencies and payment methods
For SaaS & Subscription Businesses
Choose gateways with recurring billing features
Stripe is often a strong choice here
For Freelancers & Agencies
Focus on low fees and easy withdrawals
Payoneer and Wise are popular options

How to Choose the Right Payment Gateway (Step-by-Step)

Follow this simple process:

Step 1: Identify Your Target Countries

Know where your customers are located.

Step 2: Define Your Business Model

Are you running an e-commerce store, SaaS product, or freelance service?

Step 3: Compare Features & Fees

Don’t just look at pricing—compare features too.

Step 4: Test Integration

Try the gateway before fully committing.

Step 5: Start Small and Scale

Begin with one gateway and expand as your business grows.

Conclusion

Choosing the best payment gateway for international business is a crucial decision that directly impacts your growth, revenue, and customer experience.

Focus on key factors like supported countries, fees, payment methods, and security. Don’t rush the decision—test different options and choose what works best for your business model.

With the right payment gateway in place, you’ll be ready to scale your business globally and accept payments without barriers.