README

🚀 Introduction

This is a JSX-based Laravel React Starter Kit with shadcn/ui and TailwindCSS 4. It provides a modern setup for building Laravel applications with a React frontend using Inertia.

This kit uses plain JavaScript (.jsx) instead of TypeScript, making it easier for developers who prefer JavaScript. It includes React 19, TailwindCSS 4, and shadcn/ui components built on Radix UI.

🎯 Features

✅ React 19 + JSX – No TypeScript, just JavaScript
✅ Laravel 12 – Latest Laravel framework
✅ Inertia.js v2 – Single-page app experience
✅ TailwindCSS 4 – Modern utility-first CSS framework
✅ shadcn/ui – Beautiful, accessible component library (50+ components)
✅ Vite – Fast development with hot module replacement
✅ Dark Mode – Built-in theme switching
✅ Zero Configuration – Install and start coding!

🛠 Installation

1️⃣ Installation via Laravel Installer

laravel new --using=panelmaster-in/laravel-react-jsx laravel-jsx-app

2️⃣ Install Dependencies

cd laravel-jsx-app
composer install
npm install

3️⃣ Setup Environment

cp .env.example .env
php artisan key:generate

4️⃣ Run Database Migrations

php artisan migrate --seed

5️⃣ Start Development

npm run start

This starts both the Laravel server and Vite dev server concurrently.

Your app is now running! 🎉

📚 Tech Stack

Laravel 12 – PHP web framework
React 19 – UI library
Inertia.js v2 – SPA framework
TailwindCSS 4 – CSS framework
shadcn/ui – Component library (Radix UI)
Vite – Build tool

🏗 Project Structure

├── app/                    # Laravel application
│   ├── Http/Controllers/  # Controllers
│   ├── Models/            # Eloquent models
│   └── Providers/         # Service providers
├── resources/
│   ├── pages/             # Inertia React pages
│   ├── components/        # React components
│   │   └── ui/            # shadcn/ui components (50+)
│   ├── hooks/             # React hooks
│   ├── lib/               # Utility functions
│   ├── js/                # JavaScript entry points
│   │   ├── app.jsx        # Client entry
│   │   └── ssr.jsx        # SSR entry
│   ├── css/
│   │   └── app.css        # TailwindCSS styles
│   └── views/
│       └── app.blade.php  # Main Blade template
└── routes/
    └── web.php            # Application routes

🎨 shadcn/ui Components

This starter kit includes 50+ pre-configured shadcn/ui components:

Layout & Navigation

Accordion, Breadcrumb, Navigation Menu, Sidebar, Tabs, Pagination

Forms & Inputs

Button, Input, Textarea, Select, Checkbox, Radio Group, Switch, Calendar

Overlays

Dialog, Alert Dialog, Sheet, Popover, Tooltip, Dropdown Menu

Feedback

Alert, Badge, Progress, Skeleton, Toast

Data Display

Table, Card, Avatar, Chart, Carousel

All components are accessible, customizable, and follow the shadcn/ui "New York" style.

🔧 Using Components

Import shadcn/ui components using path aliases:

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

Use TailwindCSS classes for styling:

<Button className="bg-primary text-white hover:bg-primary/90">
  Click me
</Button>

🚦 Development Commands

npm run start - Start Laravel server and Vite dev server
npm run dev - Start Vite dev server only (For CSS and React)
npm run build - Build for production
php artisan test - Run tests
php artisan serve - Starts a local development server

📖 Documentation

⚖️ License

The Laravel + React JSX starter kit is open-sourced software licensed under the MIT license.

Happy coding! 🚀

panelmaster-in / laravel-react-jsx

Maintainers

Details