React Starter Kit React

What's in the kit

The React kit is the full SaaS Laravel backend (multi-tenancy, auth, users, roles, domains, localization) with a React 19 + TypeScript frontend in resources/js.

• The Laravel side is identical in all three kits. Only the frontend differs.
• Pages are Inertia v3 function components. There is no separate API.
• Forms, dialogs and toasts are pre-built, so a new page is mostly layout and data.

Laravel route → Controller → Service → Inertia::render('tenants/index') → pages/tenants/index.tsx

Tech stack

Package	Version	Used for
react / react-dom	^19.2	Function components (.tsx)
@inertiajs/react	^3.0	Inertia client: Form, Link, Head, router, usePage, useForm, useHttp, setLayoutProps
@inertiajs/vite	^3.0	Resolves pages from resources/js/pages
@vitejs/plugin-react + babel-plugin-react-compiler	^5.2 / ^1.0	React plugin with the React Compiler enabled
@radix-ui/react-*	various	Primitives behind the shadcn/ui components in components/ui
lucide-react	^0.475	Icon components
@iconify/react	^6.0	String icons rendered by CommonIcon (menus use lucide:* names)
sonner	^2.0	Toast notifications
sortablejs	^1.15	Drag and drop on Setup → Menus
input-otp	^1.4	Two-factor code input
@erag/lang-sync-inertia	^3.1	reactLang() translation helper
@laravel/passkeys	^0.2	Passkey registration and login
@laravel/vite-plugin-wayfinder	^0.1	Typed route and controller functions
vite / tailwindcss	^8 / ^4	Build and styling
typescript	^5.7	Type checking with tsc --noEmit

Conventions

Topic	React kit convention
File names	kebab-case .tsx everywhere, e.g. pages/tenants/index.tsx, components/common/common-input.tsx
Page names	kebab-case path: Inertia::render('tenants/index')
Shared logic	Hooks in hooks/use-x.ts (usePermission, useConfirmDialog, useLanguage, useDebounceFn, …)
Layout per page	Static Page.layout = … property
Forms	Inertia <Form> with a render-prop child: {({ errors, processing }) => …}
App wrapper	app.tsx runs in strictMode and wraps every page in TooltipProvider and the sonner Toaster
Translations	reactLang() from @erag/lang-sync-inertia/react

Get the code

After purchase you get access to the private repository erag-labs/saas-laravel-starter-kit-react (see Repository access).

git clone https://github.com/erag-labs/saas-laravel-starter-kit-react.git
cd saas-laravel-starter-kit-react

Install

Local development covers PHP, the database, Herd domains and tenancy in detail. The short version:

One command

composer setup
php artisan db:seed

Step by step

composer install
cp .env.example .env
php artisan key:generate
php artisan migrate --seed
npm install
npm run build

• composer setup runs migrations but does not seed. Run php artisan db:seed once to create roles, permissions, menus and one default user per role.
• .env.example ships with APP_URL=https://react.test and APP_DOMAIN=react.test. Change both to the domain you serve the app on.

TIP

The Wayfinder files in resources/js/routes and resources/js/actions are generated by the Vite plugin and ignored by git. Run npm run dev or npm run build at least once before importing them.

Next steps

• Architecture: folders, app entry, shared props, permissions, translations
• Components: the Common* form components, dialogs and app shell
• Pages: every page and its route
• Layouts: sidebar/header app layout, card/simple/split auth layout
• Inertia: forms, visits, flash toasts, Wayfinder routes
• Development: daily commands and adding a page end to end