When starting a new Laravel 12 project, the Starter Kit provides a great foundation with authentication and essential features. However, every project has unique requirements, and customizing the Starter Kit can help you tailor it to your needs.

In this guide, I will walk you through how to modify the Laravel 12 Starter Kit, including authentication changes, UI updates, and feature enhancements.

Different layout options for auth and app screens to suit your needs.

Edit your authentication layouts to be simple, card, or split and your application layouts to be sidebar or header.

Customize Laravel 12 Starter Kit

 

React Starter Kit is built with Inertia 2, React 19, Tailwind CSS 4, and shadcn/ui. Like all starter kits, both the backend and frontend code are fully integrated into your application, giving you complete control over customization.

Most of the front-end code is located in the resources/js directory. You are free to modify any part of it to tailor the appearance and functionality of your application to your needs.

resources/js/
├── components/    # Reusable React components
├── hooks/         # React hooks
├── layouts/       # Application layouts
├── lib/           # Utility functions and configuration
├── pages/         # Page components
└── types/         # TypeScript definitions

 

The React Starter Kit offers two primary layout options: a sidebar layout and a header layout. By default, the sidebar layout is used, but you can easily switch to the header layout by modifying the layout import in the app-layout.tsx file.

resources/js/layouts/app-layout.tsx

import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
// CHANGE TO
import AppLayoutTemplate from '@/layouts/app/app-header-layout';

Example:

 

The authentication pages included with the React starter kit, such as the login page and registration page, also offer three different layout variants: simple, card, and split.

To change your authentication layout, modify the layout that is imported at the top of your application's auth-layout.tsx file.

resources/js/layouts/auth-layout.tsx

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';
// OR
import AuthLayoutTemplate from '@/layouts/auth/auth-card-layout';
// OR
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Auth Card Layout Example:

Auth Split Layout Example:

 

---

You might also like:

• Read Also: How to Create Login & Register in Laravel 12
• Read Also: How to Create API Versioning in Laravel 11
• Read Also: How to Add Email Verification in Laravel 11
• Read Also: Role And Permission In Laravel 9 Tutorial